间隔时间滚动的效果,可设置滚动参数

发布时间：2018-08-16 20:47 所属栏目：121 来源：站长网

导读：烈火网(LieHuo.Net)教程这是一个间隔一定时间才会滚动的效果，可以设置滚动速度，单行的滚动高度，滚动的行数，每次停留的时间，滚动的速度等，多个参数。我们来看一下效果： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w

　　烈火网(LieHuo.Net)教程这是一个间隔一定时间才会滚动的效果，可以设置滚动速度，单行的滚动高度，滚动的行数，每次停留的时间，滚动的速度等，多个参数。

　　我们来看一下效果：

<!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=GBK" /> <title>间隔时间自由滚动特技</title> <base target="_blank"> <style> *{margin:0;padding:0;border:0;list-style:none;} body{font:12px Verdana, Geneva, sans-serif;line-height:18px;color:#333;} a{text-decoration:none;color:#004285;font-size:14px;font-weight:bold;} a:hover{text-decoration:underline;color:#C33;} .rig{border:1px solid #dedede;width:282px;margin-bottom:5px;} #qy a{font-size:12px;} h5 span a{font-size:12px;font-weight:normal;color:#333;} h5{padding:0 10px;font-size:14px;height:30px;line-height:30px;background:url(http://www.veryhuo.com/uploads/allimg/1004/liehuo_marquee_time.jpg) left center repeat-x;border-bottom:1px solid #dedede;} span{float:right;} </style> </head> <body> <div class="rig"> <h5><span><a href="http://www.veryhuo.com/?21:13-2010-4-18">更多>></a></span>烈火滚动特效</h5> <div id="qy" style="width:256px;margin:7px 10px 5px;height:94px;overflow:hidden" onMouseOver="qiScrollAmount=0" onmouseout="qiScrollAmount=2"> <ul> <li id="tab1"> <table border='0' cellspacing='0' cellpadding='0' width='256px'> <tr> <td height='70'><a href="http://www.veryhuo.com/?21:13-2010-4-18"><img src="http://www.veryhuo.com/uploads/allimg/1004/liehuo_256x70_1.jpg" /></a></td> </tr> <tr> <td height='24'><span><a href="http://www.veryhuo.com/?21:13-2010-4-18">烈火首页</a></span> <p><a href="http://www.veryhuo.com/?21:13-2010-4-18">电脑教程学院</a></p></td> </tr>  <tr> <td height='70'><a href="http://www.veryhuo.com/?21:13-2010-4-18"><img src="http://www.veryhuo.com/uploads/allimg/1004/liehuo_256x70_2.jpg" /></a></td> </tr> <tr> <td height='24'><span><a href="http://www.veryhuo.com/?21:13-2010-4-18">烈火首页</a></span> <p><a href="http://www.veryhuo.com/?21:13-2010-4-18">电脑教程学院</a></p></td> </tr> </table> </li> <li id="tab2"></li> </ul> </div> <script> var qoMarquee = document.getElementById("qy"); //滚动对象 var tab1 = document.getElementById("tab1"); var tab2 = document.getElementById("tab2"); var qiLineHeight = 94;//单行高度，像素IE var qiLineCount = 0; //实际行数 var qiScrollAmount = 2; //每次滚动高度，像素（速度） var speed1=2000;//每次停留时间 var speed2=1;//滚动速度 tab2.innerHTML=tab1.innerHTML; function trun() { if(qoMarquee.scrollTop==2*qiLineHeight){qoMarquee.scrollTop=0;window.setTimeout( "trun()", speed2 );} else{ qoMarquee.scrollTop +=qiScrollAmount; if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {window.setTimeout( "trun()", speed1 );} else {window.setTimeout( "trun()", speed2 );} } } window.setTimeout( "trun()", speed1 ); </script> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）