jQuery之marquee无缝滚动插件实现教程

本文主要介绍了基于jquery实现一个marquee无缝滚动的插件,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。

基于jQuery，实现一个marquee无缝滚动的插件，已经发布到 git.oschina.net，演示稍后更新（更新到 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]
[TABLE]
'; break; case "top": case "bottom": opt.weight = "height"; opt.margin = "margin-top"; opt.tpl = '
[TABLE]
[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.ｒｅｐｌａｃｅ(/\[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以下使用，还需要在之前增加如下代码：

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.ｃｏｎｃａｔ(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("执行了一次");});

相关推荐：

微信小程序组件 marquee实例分享

html中关于marquee标签的详细介绍

总结marquee 标签的使用实例JS实现marquee滚动效果的实例详解