无间断左右上滚动代码JS及jQuery优化版
作者:Alone 来源:安安互联 点击量:12268 发表时间:2013/8/31 16:25:36
无间断滚动的代码有很多,但是有很多在内容比较少(例如只有一张图片)的时候会不滚动,而且在页面上添加多个滚动区域的时候也比较麻烦。
本人针对这两点根据网上的代码优化了一下,希望对大家有用。
JS版:
在网页上没有用到jQuery库的时候使用。
<div id="an_slide_left" style="width:100%;overflow:hidden;"> <table width="200%" cellpadding="0" cellspacing="0" border="0"> <tr> <td id="an_slide_left_box1"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr align="center"> <td> <a href="http://www.2n.hk/" title="安徽安安互联 - 合肥网站建设|合肥做网站" target="_blank"><img src="http://www.2n.hk/UpLoad/image/logo/logo.www.175.png" alt="安安互联" /></a> </td> <td> <a href="http://www.an56.net/" title="安徽安安互联 - 合肥虚拟主机|合肥域名空间" target="_blank"><img src="http://www.an56.net/images/an56.png" alt="安安互联" /></a> </td> <td> <a href="http://www.ancms.cn/" title="ANCMS - 安安网站内容管理系统 - ANCMS" target="_blank"><img src="http://www.ancms.cn/UpLoad/image/logo/logo.ancms.225.png" alt="ANCMS" /></a> </td> <td> <a href="http://www.taobao.com/go/chn/tbk_channel/channelcode.php?pid=mm_26461607_0_0&eventid=101329" target="_blank"><img src="http://img04.taobaocdn.com/tps/i4/T1xjNNXlphXXXXXXXX-167-63.gif" /></a> </td> </tr> </table> </td> <td id="an_slide_left_box2"></td> </tr> </table> </div> <script> var an_slide_speed = 30; var an_slide_left = document.getElementById('an_slide_left'); var an_slide_left_box1 = document.getElementById('an_slide_left_box1'); var an_slide_left_box2 = document.getElementById('an_slide_left_box2'); an_slide_left_box2.innerHTML = an_slide_left_box1.innerHTML; function an_slide_left_fun() { if (an_slide_left_box2.offsetWidth - an_slide_left.scrollLeft <= 0) an_slide_left.scrollLeft -= an_slide_left_box1.offsetWidth; else an_slide_left.scrollLeft++; } var an_slide_left_timer = setInterval(an_slide_left_fun,an_slide_speed); an_slide_left.onmouseover = function() { clearInterval(an_slide_left_timer); } an_slide_left.onmouseout = function() { an_slide_left_timer = setInterval(an_slide_left_fun,an_slide_speed); } </script>
演示:
jQuery版:
需要jQuery支持,内容少也可以正常滚动,可以在页面上随意添加多个滚动区域。
<div class="an-slide-left" data-speed="40" style="width:100%;overflow:hidden;"> <table width="200%" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="an-slide-left-box"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr align="center"> <td> <a href="http://www.2n.hk/" title="安徽安安互联 - 合肥网站建设|合肥做网站" target="_blank"><img src="http://www.2n.hk/UpLoad/image/logo/logo.www.175.png" alt="安安互联" /></a> </td> <td> <a href="http://www.an56.net/" title="安徽安安互联 - 合肥虚拟主机|合肥域名空间" target="_blank"><img src="http://www.an56.net/images/an56.png" alt="安安互联" /></a> </td> <td> <a href="http://www.ancms.cn/" title="ANCMS - 安安网站内容管理系统 - ANCMS" target="_blank"><img src="http://www.ancms.cn/UpLoad/image/logo/logo.ancms.225.png" alt="ANCMS" /></a> </td> <td> <a href="http://www.taobao.com/go/chn/tbk_channel/channelcode.php?pid=mm_26461607_0_0&eventid=101329" target="_blank"><img src="http://img04.taobaocdn.com/tps/i4/T1xjNNXlphXXXXXXXX-167-63.gif" /></a> </td> </tr> </table> </td> </tr> </table> </div> <script> $(function() { $('.an-slide-left').each(function(i) { var obj = $(this); var speed = parseInt(obj.attr('data-speed')) ? parseInt(obj.attr('data-speed')) : 30; var box = obj.find('.an-slide-left-box'); box.clone().insertAfter(box); function an_slide_left(obj) { obj = $(obj); box = obj.find('.an-slide-left-box'); if(box[1].offsetWidth - obj[0].scrollLeft <= 0) obj[0].scrollLeft -= box[0].offsetWidth; else obj[0].scrollLeft++; } var ter = setInterval(function(){an_slide_left(obj);},speed); obj.mouseover(function() { clearInterval(ter); }); obj.mouseout(function() { ter = setInterval(function(){an_slide_left(obj);},speed); }) }); }); </script>
演示:
向右滚动:
<div class="an-slide-right" data-speed="40" style="width:100%;overflow:hidden;"> <table width="200%" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="an-slide-right-box"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr align="center"> <td> <a href="http://www.2n.hk/" title="安安网络 - 合肥网站建设|合肥做网站" target="_blank">安安网络</a> </td> <td> <a href="http://www.an56.net/" title="安安互联 - 虚拟主机|域名空间" target="_blank">安安互联</a> </td> </tr> </table> </td> </tr> </table> </div> <script> $(function() { $('.an-slide-right').each(function(i) { var obj = $(this); var speed = parseInt(obj.attr('data-speed')) ? parseInt(obj.attr('data-speed')) : 30; var box = obj.find('.an-slide-right-box'); box.clone().insertAfter(box); function an_slide_right() { obj = $(obj); box = obj.find('.an-slide-right-box'); if(obj[0].scrollLeft <= 0) obj[0].scrollLeft += box[1].offsetWidth; else obj[0].scrollLeft--; } var ter = setInterval(function(){an_slide_right(obj);},speed); obj.mouseover(function() { clearInterval(ter); }); obj.mouseout(function() { ter = setInterval(function(){an_slide_right(obj);},speed); }); }); }); </script>
演示:
向上滚动(最外层div需要固定高度):
<div class="an-slide-top" data-speed="40" style="height:100px;overflow:hidden;"> <table width="100%" height="200%" cellpadding="0" cellspacing="0" border="0"> <tr class="an-slide-top-box"> <td> <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <a href="http://www.2n.hk/" title="安安网络 - 合肥网站建设|合肥做网站" target="_blank">安安网络</a> </td> </tr> <tr> <td> <a href="http://www.an56.net/" title="安安互联 - 虚拟主机|域名空间" target="_blank">安安互联</a> </td> </tr> </table> </td> </tr> </table> </div> <script> $(function() { $('.an-slide-top').each(function(i) { var obj = $(this); var speed = parseInt(obj.attr('data-speed')) ? parseInt(obj.attr('data-speed')) : 30; var box = obj.find('.an-slide-top-box'); box.clone().insertAfter(box); function an_slide_top() { obj = $(obj); box = obj.find('.an-slide-top-box'); if(box[1].offsetHeight - obj[0].scrollTop <= 0) obj[0].scrollTop -= box[0].offsetHeight; else obj[0].scrollTop ++; } var ter = setInterval(function(){an_slide_top(obj);},speed); obj.mouseover(function() { clearInterval(ter); }); obj.mouseout(function() { ter = setInterval(function(){an_slide_top(obj);},speed); }); }); }); </script>
演示:
- 下一篇:优酷视频播放代码无广告版