jQuery如何实现marquee无缝滚动的插件
这篇文章给大家分享的是有关jQuery如何实现marquee无缝滚动的插件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
10年积累的成都网站设计、网站建设、外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有港南免费网站建设让你可以放心的选择与我们合作。
代码如下:
/** * 类库名称: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] | [TABLE] |
[TABLE] | [TABLE] |
如果在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无缝滚动的插件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
新闻标题:jQuery如何实现marquee无缝滚动的插件
文章来源:http://pwwzsj.com/article/jsshod.html