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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
JS类的封装及实现代码
Dec 02 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
原生js实现放大镜特效
Mar 08 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
js实现页面导航层级指示效果
Aug 25 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Python 深入理解yield
2008/09/06 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python的unittest测试类代码实例
2017/12/07 Python
Python多继承顺序实例分析
2018/05/26 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
酒店管理自荐信
2013/10/23 职场文书
护理专科自荐书范文
2014/02/18 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
房产公证书
2015/01/23 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
催款通知书范文
2015/04/17 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python