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


Posted in Javascript onMarch 09, 2017

基于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无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
js实现显示手机号码效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
javascript 秒表计时器实现代码
Mar 09 #Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 #Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 #Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python选择排序算法实例总结
2015/07/01 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Django数据库操作之save与update的使用
2020/04/01 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
运动会100米解说词
2014/01/23 职场文书
初二生物教学反思
2014/02/03 职场文书
眼镜促销方案
2014/03/15 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
运动会方阵口号
2014/06/07 职场文书
小学安全汇报材料
2014/08/14 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
世界遗产导游词
2015/02/13 职场文书
认真学习保证书
2015/02/26 职场文书
基石观后感
2015/06/12 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python