基于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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
学习vue.js计算属性
Dec 03 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 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
smarty的section嵌套循环用法示例
2016/05/28 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Python创建日历实例
2014/08/21 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
保险公司早会主持词
2014/03/22 职场文书
初中学生期末评语
2014/04/24 职场文书
新闻学专业求职信
2014/07/28 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
换届选举主持词
2015/07/03 职场文书
办公用品管理制度
2015/08/04 职场文书