JQuery 插件制作实践 xMarquee插件V1.0
158 浏览量
2020-12-09
01:11:11
上传
评论
收藏 66KB PDF 举报
JQuery 插件制作实践插件制作实践 xMarquee插件插件V1.0
插件需求
1，向左或者右移动列表中的元素.(注，上下方向也一样的，用css控制列表元素float的方向即可～)
2，鼠标移动到某个元素上时，改元素突出显示(css控制)，播放器停止滚动。移开后继续跑马。。
3，可选左右手工导航按钮。
实现原理实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动；移动时的效果；移动后的回调函数；（注：利用移动后的回调函数可以方便做一个相册插件，有兴趣的自
己写下）。做开发的人要记住一句话：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;
weixin_38723373
- 粉丝: 7
- 资源: 915
最新资源
- RAG技术知识图谱概览
- VMware Workstation功能强大的桌面虚拟计算机软件
- 中文命名实体识别，采用bilstm+crf模型基于Pytorch实现
- PowerGREP V5.3.3 Retail
- 美赛数学建模算法-使用Matlab实现灰色系统建模GreySystem-国赛-题解.zip
- 基于albert-bilstm-crf架构利用keras框架实现NER
- RegexMagic V2.13.1 Retail
- python-3.6.5-macosx 安装包
- 美赛数学建模算法-使用Matlab实现图论GraphTheory-包括求最短路径-国赛-题解.zip
- RegexBuddy v4.14.1 Retail
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0