• 安安互联 - 合肥网站建设|合肥做网站
  • 安安网站内容管理系统(ANCMS)
  • 安安互联 - 合肥虚拟主机|合肥空间域名
点击这里给我发消息
网站前端

当前位置: 首页 > 教程资料 > 网站前端

无间断左右上滚动代码JS及jQuery优化版

作者:Alone    来源:安安互联    点击量:8951    发表时间: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>

演示:

安安互联 安安互联 ANCMS



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>

演示:

安安互联 安安互联 ANCMS


向右滚动:

<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>

演示:

首页  |  关于我们  |  联系方式  |  付款方式  |  手机建站  |  Sitemap  |  加入收藏

咨询邮箱:alone@an56.net   客户QQ群:200048060

在线客服: [安安客服]QQ号:11981261[安安客服]  [技术客服]QQ号:805754163[技术客服]  [业务客服]QQ号:731276376[业务客服]  [咨询客服]QQ号:49509266[咨询客服]  [违法举报]QQ号:11981261[违法举报] 

CopyRight 2012-2013 安安网络 All Rights Reserved.

分享