div+css不間斷向上滾動模板
上一次給大家介紹一種div css的不間斷滾動代碼JS特別多（不間斷滾動css代碼），這次給大家介紹的是比較實用比較簡單的不間斷css滾動代碼
DIV+CSS不間斷滾動代碼效果圖 -CSS不間斷滾動
| <p> </p> <p><a href="http://www.rs2pl.com/">div+css</a> <a href="http://www.rs2pl.com/shouce/">css手冊</a> <a href="http://www.rs2pl.com/">css</a> <a href="http://www.rs2pl.com/edu/">css研教室</a></p> <p> </p> <p>divcss5模板-上下不間斷滾動<a href="http://www.rs2pl.com/">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="http://www.rs2pl.com">div+css</a>向上不停滾動演示</li> <li><a href="http://www.rs2pl.com">CSS</a>向上不停滾動演示</li> <li><a href="http://www.rs2pl.com">divcss</a>向上不停滾動演示</li> </ul> </div> <script src="muqruujs.js" type="text/javascript"></script></p> <p ><a href="http://www.divcsss5.com/">DIV+CSS</a>提示您，可以直接查看本頁<a href="http://www.rs2pl.com/html/h26.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>向上不停滾動代碼-www.rs2pl.com-演示</title> <link href="css.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* CSS代碼如下 www.rs2pl.com */ </style> </head> <body> <p> </p> <p><a href="http://www.rs2pl.com/">div+css</a> <a href="http://www.rs2pl.com/shouce/">css手冊</a> <a href="http://www.rs2pl.com/">css</a> <a href="http://www.rs2pl.com/edu/">css研教室</a></p> <p> </p> <p>divcss5模板-上下不間斷滾動<a href="http://www.rs2pl.com/">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="http://www.rs2pl.com">div+css</a>向上不停滾動演示</li> <li><a href="http://www.rs2pl.com">CSS</a>向上不停滾動演示</li> <li><a href="http://www.rs2pl.com">divcss</a>向上不停滾動演示</li> </ul> </div> <script src="muqruujs.js" type="text/javascript"></script></p> <p ><a href="http://www.divcsss5.com/">DIV+CSS</a>提示您，可以直接查看本頁<a href="http://www.rs2pl.com/html/h26.html" title="查看源代碼">源代碼</a>將其保存下來</p> </body> </html> |
這里將JS放放入muqruujs.js的JS文件里，注意的是JS文件放置的位置及滾動代碼JS里的取值
在線演示：http://www.rs2pl.com/yanshi/2013032601/
以上為DIV+CSS模板中的純CSS不間斷滾動CSS布局代碼及說明。
查看CSS不間斷滾動網頁演示 -點我查看。
點擊另存為下載此DIV+CSS上下無間斷滾動代碼打包下載：http://www.rs2pl.com/bbs/thread-479-1-1.html。
如需轉載，請注明文章出處和來源網址：http://www.rs2pl.com/template/m109.shtml
