基于jQuery实现一个marquee无缝滚动的插件

前端之家收集整理的这篇文章主要介绍了基于jQuery实现一个marquee无缝滚动的插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 nofollow" href="http://git.oschina.net/mqycn/jQueryMarquee">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 = '代码 $(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以下使用,还需要在之前增加如下代码

插件(解决 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,两次移动之前的间隔时间数(毫秒)

调用方法如下:

以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章