基于jQuery实现一个marquee无缝滚动的插件

 更新时间:2017年03月09日 11:47:18   作者:启源的部落格  
这篇文章主要介绍了基于jQuery实现一个marquee无缝滚动的插件,非常不错,具有参考借鉴价值,需要的朋友可以参考下

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee )。

代码如下:

/**
 * 类库名称:jQuery.marquee
 * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件
 * 作者主页:http://www.miaoqiyuan.cn/
 * 联系邮箱:mqycn@126.com
 * 使用说明:http://www.miaoqiyuan.cn/p/jquery-marquee
 * 最新版本:http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
  marquee : function(opt, callback){
    opt = opt || {};
    opt.speed = opt.speed || 30;
    opt.direction = opt.direction || 'left';
    opt.pixels = opt.pixels || 2;
    switch( opt.direction ){
      case "left":
      case "right":
        opt.weight = "width";
        opt.margin = "margin-left";
        opt.tpl = '<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>';
        break;
      case "top":
      case "bottom":
        opt.weight = "height";
        opt.margin = "margin-top";
        opt.tpl = '<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>';
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    switch( opt.direction ){
      case "left":
      case "top":
        opt.addon = -1;
        break;
      case "right":
      case "bottom":
        opt.addon = 1;
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    callback = typeof callback == "function" ? callback : function(){};
    //设置宽度
    $(this).each(function(){
      if( this.control ){
        clearInterval(this.control);
      } else {
        //如果第一次执行,初始化代码
        $(this)
          .data(opt.weight, opt.weight == 'width' ? $(this).find("table").width() : $(this).find("table").height())
          .width($(this).data(opt.weight) * 2)
          .html(opt.tpl.replace(/\[TABLE\]/ig, $(this).html()))
          .mouseover(function(){
            $(this).data("pause", true);
          }).mouseout(function(){
            $(this).data("pause", false);
          });
      }
      this.control = setInterval((function(){
        if( $(this).data("pause") ){
          return;
        }
        var _margin = parseInt($(this).css(opt.margin)) + opt.addon * opt.pixels;
        if( opt.addon == -1 && _margin + $(this).data(opt.weight) < 0 ){
          _margin = 0;
        }else if( opt.addon == 1, _margin > 0 ){
          console.log(_margin < 0,$(this).data(opt.weight));
          _margin = -1 * $(this).data(opt.weight);
        }
        $(this).css(opt.margin, _margin + "px");
        callback.bind(this)();
      }).bind(this), opt.speed);
    });
    return $(this);
  }
});

如果在IE9以下使用,还需要在之前增加如下代码:

/**
 * IE8插件(解决 function 不支持 bind 的问题),非原创
*/
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== "function") {
      throw new TypeError("[jQuery.marquee.ie8] Caller is not a function");
    }
    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function() {},
      fBound = function() {
        return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
      };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

一共有三个可选参数,一个回调方法。

direction,移动方向:支持 左:left 右:right 上:top 下:bottom;

pixels,每次移动的像素数

speed,两次移动之前的间隔时间数(毫秒)

调用方法如下:

$("scroll-a").marquee();
$("scroll-b").marquee({direction:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
  console.log("执行了一次");
});

以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 使用jQuery处理AJAX请求的基础学习教程

    使用jQuery处理AJAX请求的基础学习教程

    这篇文章主要介绍了使用jQuery处理AJAX请求的基础学习教程,除此之外还引申了链式处理事件回调的写法,由浅入深非常值得借鉴,需要的朋友可以参考下
    2016-05-05
  • JQuery控制Radio选中方法分析

    JQuery控制Radio选中方法分析

    这篇文章主要介绍了JQuery控制Radio选中方法,涉及jQuery表单操作及鼠标事件响应的方法,需要的朋友可以参考下
    2015-05-05
  • JQuery选择器详解

    JQuery选择器详解

    这篇文章主要为大家介绍了JQuery选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • jQuery实现的图文高亮滚动切换特效实例

    jQuery实现的图文高亮滚动切换特效实例

    这篇文章主要介绍了jQuery实现的图文高亮滚动切换特效,涉及jquery基于鼠标事件针对页面元素遍历与动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常会遇到下拉框或日期只允许选择、不允许手动输入功能,怎么解决呢,下面小编给大家分享解决方案,一起看看吧
    2017-04-04
  • Query中click(),bind(),live(),delegate()的区别

    Query中click(),bind(),live(),delegate()的区别

    这篇文章主要介绍了Query中click(),bind(),live(),delegate()之间的区别。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JQuery复制DOM节点的方法

    JQuery复制DOM节点的方法

    这篇文章主要介绍了JQuery复制DOM节点的方法,涉及jQuery中clone与appendTo方法的使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery实现的原图对比窗帘效果

    jQuery实现的原图对比窗帘效果

    这篇文章主要介绍了jQuery实现的原图对比窗帘效果,需要的朋友可以参考下
    2014-06-06
  • Jquery AutoComplete自动完成 的使用方法实例

    Jquery AutoComplete自动完成 的使用方法实例

    jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
    2010-03-03
  • jQuery修改CSS伪元素属性的方法

    jQuery修改CSS伪元素属性的方法

    CSS伪元素不是DOM元素,因此你无法直接选择到它们。下面与大家分享两种不错的修改方法,需要的朋友可以参考下
    2014-07-07

最新评论