2010-05-19 11:25:30 向上不间断滚动div+css+js模板，css5给大家介绍一个不间断滚动div+css代码，
div+css不间断向上滚动模板
上一次给大家介绍一种div css的不间断滚动代码JS特别多（不间断滚动css代码），这次给大家介绍的是比较实用比较简单的不间断css滚动代码
DIV+CSS不间断滚动代码效果图 -CSS不间断滚动
| <p> </p> <p><a href="//www.html8.com.cn/">div+css</a> <a href="//www.html8.com.cn/shouce/">css手册</a> <a href="//www.html8.com.cn/">css</a> <a href="//www.html8.com.cn/edu/">css研教室</a></p> <p> </p> <p>HTML8模板-上下不间断滚动<a href="//www.html8.com.cn/">DIV+CSS</a></p> <p> <div id="mq" onmouseover=iScrollAmount=0 style="OVERFLOW: hidden; WIDTH:330px; margin:0 auto; HEIGHT:22px; line-height:22px;" onmouseout=iScrollAmount=1> <ul> <li><a href="//www.html8.com.cn">div+css</a>向上不停滚动演示</li> <li><a href="//www.html8.com.cn">CSS</a>向上不停滚动演示</li> <li><a href="//www.html8.com.cn">divcss</a>向上不停滚动演示</li> </ul> </div> <script src="muqruujs.js" type="text/javascript"></script></p> <p ><a href="//www.html8.com.cn/">DIV+CSS</a>提示您，可以直接查看本页<a href="//www.html8.com.cn/html/26.html" title="查看源代码">源代码</a>将其保存下来</p> |
不间断JS代码：
| var oMarquee = document.getElementById("mq"); //滚动对象 var iLineHeight = 22; //单行高度，像素 var iLineCount = 3; //实际行数 var iScrollAmount = 1; //每次滚动高度，像素 function run() { oMarquee.scrollTop += iScrollAmount; if ( oMarquee.scrollTop == iLineCount * iLineHeight ) oMarquee.scrollTop = 0; if ( oMarquee.scrollTop % iLineHeight == 0 ) { window.setTimeout( "run()", 2500 ); } else { window.setTimeout( "run()", 10 ); } } oMarquee.innerHTML += oMarquee.innerHTML; window.setTimeout( "run()", 2500 ); |
完整div+css不间断滚动代码
| <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywords" /> <title>向上不停滚动代码-html8.com.cn-演示</title> <link href="css.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* CSS代码如下 html8.com.cn */ </style> </head> <body> <p> </p> <p><a href="//www.html8.com.cn/">div+css</a> <a href="//www.html8.com.cn/shouce/">css手册</a> <a href="//www.html8.com.cn/">css</a> <a href="//www.html8.com.cn/edu/">css研教室</a></p> <p> </p> <p>HTML8模板-上下不间断滚动<a href="//www.html8.com.cn/">DIV+CSS</a></p> <p> <div id="mq" onmouseover=iScrollAmount=0 style="OVERFLOW: hidden; WIDTH:330px; margin:0 auto; HEIGHT:22px; line-height:22px;" onmouseout=iScrollAmount=1> <ul> <li><a href="//www.html8.com.cn">div+css</a>向上不停滚动演示</li> <li><a href="//www.html8.com.cn">CSS</a>向上不停滚动演示</li> <li><a href="//www.html8.com.cn">divcss</a>向上不停滚动演示</li> </ul> </div> <script src="muqruujs.js" type="text/javascript"></script></p> <p ><a href="//www.html8.com.cn/">DIV+CSS</a>提示您，可以直接查看本页<a href="//www.html8.com.cn/html/26.html" title="查看源代码">源代码</a>将其保存下来</p> </body> </html> |
这里将JS放放入muqruujs.js的JS文件里，注意的是JS文件放置的位置及滚动代码JS里的取值
在线演示：//www.html8.com.cn/yanshi/2013032601/
以上为DIV+CSS模板中的纯CSS不间断滚动CSS布局代码及说明。
查看CSS不间断滚动网页演示 -点我查看。
点击另存为下载此DIV+CSS上下无间断滚动代码打包下载：立即下载。