<!-- longdd 2013.4.26 字幕横向滚屏--> <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<style type="text/css"> #ScrollWord{ width: 1000px; height: 30px; border: solid 1px #000; margin: 20px auto; overflow: hidden; } #ScrollCont{ width: 2000px; height: 30px; } #div1{ float:left; width: 1000px; height: 30px; line-height: 30px; } #div2{ float:left; width: 1000px; height: 30px; line-height: 30px; } </style> <script> $(function() { //复制div1内容到div2 $("#div2").html($("#div1").html()); //定时器 var scroll = setInterval(scrolls, 150); //滚动函数 function scrolls() { if ($("#ScrollWord").scrollLeft() >= $("#div2").width()) { $("#ScrollWord").scrollLeft($("#ScrollWord").scrollLeft() - $("#div1").width()); } else { $("#ScrollWord").scrollLeft($("#ScrollWord").scrollLeft() + 5); } } //鼠标悬停停止 $("#ScrollWord").mouseover(function() { clearInterval(scroll); }); //鼠标离开继续 $("#ScrollWord").mouseout(function() { scroll = setInterval(scrolls, 150); }); }); </script> </head> <body> <div id="ScrollWord"> <div id="ScrollCont"> <div id="div1"> <span>我叫龙弟弟 我叫龙弟弟我叫龙弟弟我叫龙弟弟我叫龙弟弟 我叫龙弟弟end</span> </div> <div id="div2"></div> </div> </div> </body> </html>