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

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee )。

2017-3-16 更新,已经增加了演示代码:http://www.miaoqiyuan.cn/products/jQuery.marquee/

代码如下:

/**
 * 类库名称: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("执行了一次");
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注