基于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 相关文章推荐
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
关于crontab的使用详解
2013/06/24 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang