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 相关文章推荐
jQuery对表单的操作代码集合
Apr 06 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
SVG描边动画
Feb 23 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
利用javaScript处理常用事件详解
Apr 14 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
Django 中 cookie的使用
2017/08/17 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python语言快速上手学习方法
2018/12/14 Python
python实现AES加密与解密
2019/03/28 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
走群众路线剖析材料
2014/10/09 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
婚育证明格式
2015/06/17 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
导游词之长城八达岭
2019/09/24 职场文书
python编写函数注意事项总结
2021/03/29 Python