<!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" /> <title>自右向左无缝平滑滚动</title> <meta name="keywords" content="自右向左无缝平滑滚动" /> <meta name="description" content="自右向左无缝平滑滚动" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <style> a{color:#000;text-decoration: none;} a:hover{color:#FF0000;} li{ list-style::none; float:left; width:90px;} </style> </head> <body> <!--<div id="demo" style="overflow:hidden; width:500px;"> <div id="demo1"> <ul> <li>滚动中</li> <li>滚动中</li> <li>滚动中</li> <li>滚动中</li> <li>滚动中</li> </ul> </div> <div id="demo2"></div> </div>--> <div id="demo" style="overflow:hidden; width:735px;"> <table cellPadding=0 align=left border=0 cellspace="0"> <tr> <td id="demo1" vAlign=top><table cellpadding="0" cellspacing="0" width=1000 border=0 id="tupian"> <tr> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> <td><a class="aaa">滚动中</a></td> </tr> </table></td> <td id="demo2" vAlign=top></td> </tr> </table> </div> <!--弹出层--> <div id="tanchu" style="display:none; background-color:#6666FF;z-index:999; position: absolute; width:735px; height:160px;"> <p id="closed">[关闭]</p> sdalfjldskfjk </div> <!--弹出层 end--> <!--//衬托--> <div> <input /> <input /> <input /> <input /> <br /> <input /> <input /> <input /> <input /> <br /> <input /> <input /> <input /> <input /> <br /> <input /> <input /> <input /> <input /> <br /> <input /> <input /> <input /> <input /> <br /> <input /> <input /> <input /> <input /> <br /> </div> </body> </html> <script type="text/javascript"> var speed1=25//速度数值越大速度越慢 document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML function Marquee1(){ if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0) document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth else{ document.getElementById("demo").scrollLeft++ } } var MyMar1=setInterval(Marquee1,speed1) document.getElementById("demo").οnmοuseοver=function () {clearInterval(MyMar1)} //document.getElementById("demo").οnmοuseοut=function () {setInterval(Marquee1,speed1)} /*jquery start*/ $(function(){ $(".aaa").mouseover(function(){ $("#tanchu").css("display","block"); }); $("#closed").click(function (){ $("#tanchu").css("display","none"); MyMar1=setInterval(Marquee1,speed1) }); }); /*jquery end*/ </script>
