基于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 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
js清理Word格式示例代码
Feb 13 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
React实现轮播效果
Aug 25 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
德生S2000电路分析
2021/03/02 无线电
ftp类(myftp.php)
2006/10/09 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP读取Excel类文件
2017/05/15 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python 字符串split的用法分享
2013/03/23 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
公证书格式
2015/01/23 职场文书
地道战观后感500字
2015/06/04 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
python中super()函数的理解与基本使用
2021/08/30 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
Golang解析JSON对象
2022/04/30 Golang