css 上下滚动效果
<html> <head> <style> .scroll{ overflow:hidden; width:100%; } .scrollout{ height:250px; width:100%; overflow:hidden; cursor:pointer; } </style> <script type="text/javascript" src="jquery.js"></script> <script> //无缝滚动 var rclone=$("#rscroll").html();//这里要用html而不能用clone,html()方法是获取html代码,你是要加长html代码,clone方法是要复制节点信息 $("#rscrollout").append(rclone);//其次,你滚动的内容长度要大于200+scrollTop的高度才能进行滚动 var lclone=$("#lscroll").html(); $("#lscrollout").append(lclone); var speed=1; var NY=window.setInterval(scroll2,100); function scroll2(){ var scrollTop=$(".scrollout").scrollTop()+speed; if(scrollTop==400){ scrollTop=0; } $(".scrollout").scrollTop(scrollTop); } $(".scrollout").hover(function(){clearInterval(NY)},function(){NY=setInterval(scroll2,100);}); </script> </head> <body> <div class="scrollout" id="rscrollout"> <div id="rscroll" class="scroll" style="height:400px;"> <ul> <li>1</li> <li>11</li> <li>111</li> <li>1111</li> <li>11111</li> <li>111111</li> <li>1111111</li> <li>11111111</li> <li>111111111</li> <li>1111111111</li> <li>11111111111</li> <li>111111111111</li> <li>1111111111111</li> <li>11111111111111</li> <li>111111111111111</li> </ul> </div> </div> </body> </html>