注册 | 登录 | 网址 欢迎访问八百站长

jQuery kxbdMarquee无缝滚动(走马灯)

2015/8/9 22:00:37 作者:站长日记 来源:前端开发仓库 浏览:5106次

jQuery kxbdMarquee 无缝滚动来源

<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。

文档目录

  1. 使用方法

  2. 参数说明

  3. 相关信息

使用方法

载入 JavaScript 文件

<script src="jquery.js"></script> 
<script src="jquery.kxbdmarquee.js"></script> 

CSS 样式

/** 
 * 父容器需要设置溢出隐藏 
 * 如果是水平滚动,项目需要设置浮动 
 */
 
#element_id{overflow:hidden;} 
#element_id ul li{float:left;} 

DOM 结构

<div id="element_id"> 
  <ul> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
  </ul> 
</div> 

JavaScript 调用方式

$('#element_id').kxbdMarquee();

参数说明

名称默认值说明
direction"left"滚动方向。可设置为:"left", "right", "up", "down"
isEqualtrue所有滚动的元素长宽是否相等。可设置为:true, false
loop0循环滚动次数,0 表示无限循环
scrollAmount1步长(px)
scrollDelay20时长(ms)

相关信息

作者网站:http://www.kxbd.com/?p=281

相关文档:中文文档


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery kxbdMarquee 无缝滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #marquee {
        width: 800px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid #ccc;
        margin-top: 20px;
      }
      #marquee li {
        list-style-type: none;
        float: left;
      }
      #marquee img {
        width: 240px;
        height: 180px;
        border: 0;
        margin: 10px 5px;
      }
    </style>
  </head>
  <body>
    <p align="center">jQuery kxbdMarquee 无缝滚动</p>
    <div id="marquee">
      <ul>
        <li><a href="#"><img src="images/01.jpg"></a></li>
        <li><a href="#"><img src="images/02.jpg"></a></li>
        <li><a href="#"><img src="images/03.jpg"></a></li>
        <li><a href="#"><img src="images/04.jpg"></a></li>
        <li><a href="#"><img src="images/05.jpg"></a></li>
        <li><a href="#"><img src="images/06.jpg"></a></li>
      </ul>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.kxbdmarquee.js"></script>
    <script>
      $(function(){
        $("#marquee").kxbdMarquee();
      });
    </script>
  </body>
</html>

jquery.kxbdmarquee.js代码:

/**
 * @classDescription 模拟Marquee,无间断滚动内容
 * @author Aken Li(www.kxbd.com)
 * @DOM
 *    <div id="marquee">
 *      <ul>
 *         <li></li>
 *         <li></li>
 *      </ul>
 *    </div>
 * @CSS
 *    #marquee {overflow:hidden;width:200px;height:50px;}
 * @Usage
 *    $("#marquee").kxbdMarquee(options);
 * @options
 *    isEqual:true,    //所有滚动的元素长宽是否相等,true,false
 *    loop:0,        //循环滚动次数,0时无限
 *    direction:"left",  //滚动方向,"left","right","up","down"
 *    scrollAmount:1,    //步长
 *    scrollDelay:20    //时长
 */
(function($){
  $.fn.kxbdMarquee=function(options){
    var opts=$.extend({},$.fn.kxbdMarquee.defaults, options);

    return this.each(function(){
      var $marquee=$(this);        //滚动元素容器
      var _scrollObj=$marquee.get(0);    //滚动元素容器DOM
      var scrollW=$marquee.width();    //滚动元素容器的宽度
      var scrollH=$marquee.height();    //滚动元素容器的高度
      var $element=$marquee.children();  //滚动元素
      var $kids=$element.children();    //滚动子元素
      var scrollSize=0;          //滚动元素尺寸

      //滚动类型,1左右,0上下
      var _type=(opts.direction=="left"||opts.direction=="right") ? 1:0;

      //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
      $element.css(_type?"width":"height",10000);

      //获取滚动元素的尺寸
      if(opts.isEqual){
        scrollSize=$kids[_type?"outerWidth":"outerHeight"]()*$kids.length;
      }else{
        $kids.each(function(){
          scrollSize+=$(this)[_type?"outerWidth":"outerHeight"]();
        });
      };

      //滚动元素总尺寸小于容器尺寸,不滚动
      if(scrollSize<(_type?scrollW:scrollH)){return;}; 

      //克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
      $element.append($kids.clone()).css(_type?"width":"height",scrollSize*2);

      var numMoved=0;
      function scrollFunc(){
        var _dir=(opts.direction=="left"||opts.direction=="right") ? "scrollLeft":"scrollTop";
        if (opts.loop>0) {
          numMoved+=opts.scrollAmount;
          if(numMoved>scrollSize*opts.loop){
            _scrollObj[_dir]=0;
            return clearInterval(moveId);
          };
        };

        if(opts.direction=="left"||opts.direction=="up"){
          var newPos=_scrollObj[_dir]+opts.scrollAmount;
          if(newPos>=scrollSize){
            newPos-=scrollSize;
          }
          _scrollObj[_dir]=newPos;
        }else{
          var newPos=_scrollObj[_dir]-opts.scrollAmount;
          if(newPos<=0){
            newPos += scrollSize;
          };
          _scrollObj[_dir]=newPos;
        };
      };

      //滚动开始
      var moveId=setInterval(scrollFunc, opts.scrollDelay);

      //鼠标划过停止滚动
      $marquee.hover(function(){
        clearInterval(moveId);
      },function(){
        clearInterval(moveId);
        moveId=setInterval(scrollFunc, opts.scrollDelay);
      });
    });
  };

  $.fn.kxbdMarquee.defaults={
    isEqual:true,    //所有滚动的元素长宽是否相等,true,false
    loop: 0,      //循环滚动次数,0时无限
    direction: "left",  //滚动方向,"left","right","up","down"
    scrollAmount:1,    //步长
    scrollDelay:20    //时长

  };

  $.fn.kxbdMarquee.setDefaults=function(settings) {
    $.extend( $.fn.kxbdMarquee.defaults, settings );
  };
})(jQuery);