基于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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
js选择器全面解析
Jun 27 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
javascript表单验证大全
2015/08/12 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python数据挖掘需要学的内容
2019/06/23 Python
Django后台admin的使用详解
2019/07/08 Python
python定位xpath 节点位置的方法
2019/08/27 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
研究生求职推荐信范文
2013/11/30 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书