基于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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
AngularJs 常用的过滤器
May 15 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
vue中锚点的三种方法
Jul 06 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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常用代码
2006/11/23 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Selenium定位元素操作示例
2018/08/10 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
SQL语言面试题
2013/08/27 面试题
个人授权委托书
2014/04/03 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
学前班语言教学计划
2015/01/20 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript