JavaScript CSS 通用循环滚动条

滚动板

/* 初始化 */
body {
font: 12px/1 "宋体", SimSun, serif;
background:#fff;
color:#000;
}
/*核心是 position:relative;，才能让其内部的 ul 以绝对定位，通过改变 top 值实现向上移位置。*/
.scrollUl {
overflow:hidden;
position:relative;
}
/*演示多个滚动板同时使用，这里是统一按每行按 20px 高，第一个每屏 4 行，第 2 个每屏 6 行。其实每组中行高也可不同。滚动速度与具体行高无关。*/
#scrollUlTest1 {height:80px;}
#scrollUlTest2 {height:120px;}
/* 清除浏览器默认的margin和padding值 */
.scrollUl ul, .scrollUl li {
margin:0;
padding:0;
list-style:none outside; /* 清除浏览器中列表项默认的占位 */
}
.scrollUl ul {
position:absolute;
}
.scrollUl li {
height:20px;
}

通用滚动板演示

第1组

  • 第 1 条内容
  • 第 2 条内容
  • 第 3 条内容
  • 第 4 条内容
  • 第 5 条内容
  • 第 6 条内容
  • 第 7 条内容
  • 第 8 条内容
  • 第 9 条内容
  • 第 10 条内容
  • 第 11 条内容
  • 第 12 条内容
  • 第 13 条内容
  • 第 14 条内容
  • 第 15 条内容
  • 第 16 条内容
  • 第 17 条内容
  • 第 18 条内容
  • 第 19 条内容
  • 第 20 条内容

第2组

  • 第 1 条内容
  • 第 2 条内容
  • 第 3 条内容
  • 第 4 条内容
  • 第 5 条内容
  • 第 6 条内容
  • 第 7 条内容
  • 第 8 条内容
  • 第 9 条内容
  • 第 10 条内容
  • 第 11 条内容
  • 第 12 条内容
  • 第 13 条内容
  • 第 14 条内容
  • 第 15 条内容
  • 第 16 条内容
  • 第 17 条内容
  • 第 18 条内容

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript之循环停顿上下滚动

    extractNodes函数解决各浏览器的节点计算问题.FireFox把换行符也算成一个节点,很不合理啊. 先用appendChild复制前面的四个节点到底部,使得头尾是一样的内容,以作后用.记得做flash补间循环运动的时候就是这样要头尾一样. 通过setInterval隔时运行rolltxt函数. rolltxt函数首先计算的是间隔停顿的高度,滚动多高就要停顿一下,这个高度我也不知道怎么算出来的,跟CSS有关系,我是试出来的   用求余数的方法可以判断是否已经滚过了所设的间隔高度.如果余数不

  • JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后

  • 友情链接横向文字上下间隙循环滚动JS效果

    仿qq频道上下单行多条滚动js效果代码,可用于新闻,友情链接上下间隙滚动 #nav { MARGIN: 7px auto 0px; HEIGHT: 117px } #nav #hotnews { BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 89px } #Scroll { CLEAR: both; BORDER-RIGHT: #cdc9ca 1px solid; BORDER-TOP: #cdc9ca 1px solid; PADDING-LEFT: 100px; FON

  • javascript实现状态栏文字首尾相接循环滚动的方法

    本文实例讲述了javascript实现状态栏文字首尾相接循环滚动的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">

  • 分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

  • JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把:  index.html 页面展示代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • js实现的类marquee水平循环滚动

    复制代码 代码如下: <script> var speed=20;/*速度数值越大速度越慢*/ document.getElementById('www_qpsh_com2').innerHTML=document.getElementById('www_qpsh_com1').innerHTML; /*两个层来回交替出现*/ function Marquee(){ if(document.getElementById('www_qpsh_com2').offsetWidth-document

  • 兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码

    html里的marqueen也能实现内容的滚动,但滚动是间断的,在滚动一个周期中,会有一段空白出现.如果滚动的区域比较大,空间的出现,会让页面看起来很不美观.运用JavaScript可以使这一问题得到改观,实现无间断的滚动. 上下循环滚动代码: 复制代码 代码如下: <div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,3

  • JS实现div内部的文字或图片自动循环滚动代码

    复制代码 代码如下: <style type="text/css"> .content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} dl{width:400px;height:30px;border:1px solid black;} </style> <div class

  • JavaScript CSS 通用循环滚动条

    滚动板 /* 初始化 */ body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; } /*核心是 position:relative;,才能让其内部的 ul 以绝对定位,通过改变 top 值实现向上移位置.*/ .scrollUl { overflow:hidden; position:relative; } /*演示多个滚动板同时使用,这里是统一按每行按 20px 高,第一个每屏 4 行,第 2 个

  • javascript forEach通用循环遍历方法

    复制代码 代码如下: var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { if (array == null) return; //对String进行特殊处理 if(typeof array == 'string'){ array = array.split(''); } var i = 0,length = array.length; for (;i < l

  • JavaScript+CSS相册特效实例代码

    JavaScript+CSS相册特效实例代码

    嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT

  • javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

    本文实例讲述了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法.分享给大家供大家参考.具体分析如下: 可能不少朋友会遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

  • java、python、JavaScript以及jquery循环语句的区别

    一.概述     python中循环语句有两种,while,for: JavaScript中循环语句有四种,while,do/while,for,for/in jQuery循环语句each 二.java 循环语句          a.while while 的语法为: while(条件语句){ 代码块 }           或者: while (条件语句) 代码; while的含义非常简单,只要条件语句为真,就一直执行后面的代码,为假就停止不做了.例如: Scanner reader = n

  • javascript 使用for循环时该注意的问题-附问题总结

    javascript 使用for循环时该注意的问题-附问题总结

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的. 很多时候我们都用到for循环,而用到for循环部门往往对一个数组进行循环,其中我们很多时候都是这样写的: // 次佳的循环 for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 } 这样的代码虽然没有什么大问题,但是每次循环都会获取一下数组的长度,这回降低你的代码,尤其当myarray不是数组,而是一个HTMLCollection对象的时候.

  • javascript实现图片循环渐显播放的方法

    本文实例讲述了javascript实现图片循环渐显播放的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>图片的循环渐显播放效果代码</title> <head> <!--1.将下面的代码插入到HEML的<head></head>之间: --> <script language=javaScript> <!--// sandra0 = new Image()

  • javascript实现图像循环明暗变化的方法

    本文实例讲述了javascript实现图像循环明暗变化的方法.分享给大家供大家参考.具体如下: <SCRIPT language=JavaScript> var d=0 function JM_fade(ob){ if (d==0) {ob.filters.alpha.opacity+=1} else {ob.filters.alpha.opacity-=1} if (ob.filters.alpha.opacity==100){d=1;} else if (ob.filters.alpha.

  • 绝对经典的滑轮新闻显示(javascript+css)实现

    绝对经典的滑轮新闻显示(javascript+css)很早就有了,今天又见到,拿出来大家分享一下... 效果如下图:screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this

  • JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

随机推荐