无间断左右上滚动代码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>

演示：

安安网络

安安互联

上一篇：Animate.css - 纯CSS3动画效果库
下一篇：优酷视频播放代码无广告版

行业资讯公司新闻

更多>>

教程资料

最新评论