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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
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
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
Python 爬虫图片简单实现
2017/06/01 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python装饰器用法示例小结
2018/02/11 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python 处理string到hex脚本的方法
2018/10/26 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python递归下载文件夹下所有文件
2019/08/31 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
大学生学习自我评价
2014/01/13 职场文书
电台编导求职信
2014/05/06 职场文书
小学生安全责任书
2014/07/25 职场文书
地震捐款倡议书
2014/08/29 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang