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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JS跨域问题详解
Nov 25 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 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 调用远程url的六种方法小结
2009/11/02 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php常用表单验证类用法实例
2015/06/18 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
webpack打包js的方法
2018/03/12 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
Python配置mysql的教程(推荐)
2017/10/13 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python实现多张图片拼接成大图
2019/01/15 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
python分布式编程实现过程解析
2019/11/08 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
进口业务员岗位职责
2014/04/06 职场文书
考试保密承诺书
2014/08/30 职场文书
商务邀请函
2015/01/30 职场文书
入队仪式主持词
2015/07/04 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL