JQuery 插件制作实践 xMarquee插件V1.0


Posted in Javascript onApril 02, 2010

插件需求
1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可~)
2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动。移开后继续跑马。。
3,可选左右手工导航按钮。
JQuery 插件制作实践 xMarquee插件V1.0 
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动;移动时的效果;移动后的回调函数;(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下)。做开发的人要记住一句话:Do the simplest thing that could possibly work!做最简单可用的东东,千万别过分设计。
xMarquee API说明
1,dom规约
看下面源码处~2,css示例
看下面源码处~
3,主方法调用

<script type="text/javascript"> 
//<![CDATA[ 
$("#wk_featured_items").xMarquee({}); 
//]]> 
</script>

插件源码
; (function($) { 
// Private functions. 
var p = {}; 
p.stop = function(evt) { if (evt) { $(this).addClass(p._opts.on); }; window.clearInterval(p._intervalID); }; 
p.slide = function() { 
if (p._opts.dir == 1) { 
p._i.filter(":last").hide().fadeIn(p._opts.fadein).prependTo(p._t); 
} else { 
if (p._opts.vnum < p._cnt) { 
p._i.filter(":first").fadeOut(p._opts.fadeout).appendTo(p._t); 
p._i.filter(":eq(" + p._opts.vnum + ")").fadeIn(p._opts.fadein); 
} else { 
p._i.filter(":first").hide().appendTo(p._t).fadeIn(p._opts.fadein); 
}; 
}; 
//refresh 
p._i = $(p._opts.i, p._t); 
//visibility 
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide(); 
}; //slide 
p.go = function(evt) { 
p.stop(); 
if (evt) { 
$(this).removeClass(p._opts.on); 
}; 
p._intervalID = window.setInterval(function() { p.slide(); }, p._opts.interval); 
}; //go 
//main plugin body 
$.fn.xMarquee = function(options) { 
// Set the options. 
options = $.extend({}, $.fn.xMarquee.defaults, options); 
p._opts = options; 
// Go through the matched elements and return the jQuery object. 
return this.each(function() { 
//NOTE:if wanna support multiple marquee instance,we should cache private variable via $(this).data("v",v) 
p._t = this; //marquee target; 
//silde items 
p._i = $(p._opts.i, p._t); 
p._cnt = p._i.size(); 
p._intervalID = null; 
//hide unwanted items 
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide(); 
p._i.hover(p.stop, p.go); 
//buttons registeration 
$(p._opts.btn0).click(function(evt) { p._opts.dir = 0; p.stop(); p.slide(); return false; }).mouseout(p.go); 
$(p._opts.btn1).click(function(evt) { p._opts.dir = 1; p.stop(); p.slide(); return false; }).mouseout(p.go); 
//trigger the slidebox 
p.go(); 
}); 
}; 
// Public defaults. 
$.fn.xMarquee.defaults = { 
on: 'cur', 
i: 'li', //slide items css selector 
interval: 5000, 
fadein: 300, 
fadeout: 200, 
vnum: 4, //visible marquee items 
dir: 1, //marquee direaction.1=right;0=left; 
btn0: '.prev', //prev button 
btn1: '.next'//next button 
}; 
})(jQuery);

打包下载地址
Javascript 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 #Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 #Javascript
初试jQuery EasyUI 使用介绍
Apr 01 #Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 #Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
windows xp下安装pear
2006/12/02 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python如何写个俄罗斯方块
2020/11/06 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
《石榴》教学反思
2014/03/02 职场文书
《学棋》教后反思
2014/04/14 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
交通事故责任认定书
2015/08/06 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS