基于jQuery实现一个marquee无缝滚动的插件
程序员文章站
2023-12-13 18:50:22
基于jquery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mq...
基于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无缝滚动的插件,希望对大家有所帮助
推荐阅读
-
基于jQuery实现一个marquee无缝滚动的插件
-
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
-
基于jQuery实现一个marquee无缝滚动的插件
-
基于vue框架手写一个notify插件实现通知功能的方法
-
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
-
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
-
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
-
TimergliderJS 一个基于jQuery的时间轴插件
-
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
-
基于Marquee.js插件实现的跑马灯效果示例