jQuery实现无缝滚动条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现无缝滚动条相关的知识，希望对你有一定的参考价值。
很多时候只看别人的代码时很难看懂。有很多原因，有时候可能是没有耐心，这时候看一下实现的原理就很快明白代码的内容，所以要加些注释，让自己让别人都能看明白；有的时候就是因为知识有限就是不懂，哪怕代码很简单，这就需要多学习了
<!DOCTYPE html> <html> <head> <title>滚动公告</title> <meta charset="utf-8"/> <style type="text/css"> *{ padding: 0px; margin:0px; } #container{ border: 1px yellow solid; width: 500px; height: 30px; line-height:30px; overflow: hidden; } .content{ width:500px; } </style> </head> <body> <div id="container"> <div id="content" class="content"> <a href=# id="f12red1" class="f12red">1111111111111111111111111111111111111111</a><br/> <a href=# class="f12red">222222222222222222222222222222222222222222</a><br/> <a href=# class="f12red">33333333333333333333333333333333333333333333</a><br/> </div> <div id="content1" class="content"></div> </div> <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> //将content的内容复制到content1 $("#content1").html($("#content").html()); //实现的无缝滚动主函数 var marquee=function(){ if ($("#container").scrollTop() >= $("#content").height()) { //当滚动条隐藏的长度大于div1的宽度 $("#container").scrollTop(0); } else{ $("#container").scrollTop($("#container").scrollTop()+1); //每次滚动条往右移动1px； } } //主函数做循环 var mar=setInterval(marquee,100); $(".f12red").mouseenter(function(){ clearInterval(mar); }).mouseleave(function(){ mar=setInterval(marquee,100); }) </script> </body> </html>
这段代码其实有一些缺陷，含需要认真打磨，希望高手指点。
1.滚动到第一个a标签有明显的延迟
2.当鼠标移动到上面时a标签无法移动到中间
3.在滚动是如果有延迟就更好了，方便用户观看相关内容
。
以上是关于jQuery实现无缝滚动条的主要内容，如果未能解决你的问题，请参考以下文章