JQuery 插件制作实践 xMarquee插件V1.0

逆流成名

逆流成名

2016-02-19 13:32

下面这个JQuery 插件制作实践 xMarquee插件V1.0教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

打包下载

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

插件需求
1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可~)
2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动。移开后继续跑马。。
3,可选左右手工导航按钮。
jquery_xmarquee_m18
实现原理
移动列表末尾元素到第一个元素前面即可。
将来的扩展(以后用到的话再看吧)
多个元素同时移动;移动时的效果;移动后的回调函数;(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下)。做开发的人要记住一句话:Do the simplest thing that could possibly work!做最简单可用的东东,千万别过分设计。
xMarquee API说明
1,dom规约
看下面源码处~2,css示例
看下面源码处~
3,主方法调用

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)代码如下:
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);

展开更多 50%)
分享

猜你喜欢

JQuery 插件制作实践 xMarquee插件V1.0

Web开发
JQuery 插件制作实践 xMarquee插件V1.0

jQuery autocomplete插件修改

Web开发
jQuery autocomplete插件修改

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery 插件开发 其实很简单

Web开发
jQuery 插件开发 其实很简单

jQuery AnythingSlider滑动效果插件

Web开发
jQuery AnythingSlider滑动效果插件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 插件 任意位置浮动固定层

Web开发
jquery 插件 任意位置浮动固定层

JQuery Jcrop 实现图片裁剪的插件下载

Web开发
JQuery Jcrop 实现图片裁剪的插件下载

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Jquery实现无刷新DropDownList联动实现代码

Jquery实现无刷新DropDownList联动实现代码

HierarchicalFlexGrid控件的使用二

HierarchicalFlexGrid控件的使用二
下拉加载更多内容 ↓