Home > Web Front-end > JS Tutorial > body text

Tab option box effect code (plug-in) based on jQuery_jquery

WBOY
Release: 2016-05-16 18:09:59
Original
1101 people have browsed it
复制代码 代码如下:

/**
* jQuery plug-in
* Author: purecolor@foxmail.com
* Date : 2011-02-25
* Params:
* defaults:{
currentClass: current style,
trigger: trigger mode,
callBack: callback function,
auto: whether to run automatically,
detay: delay time,
index: current position
* }
* Return: null
* Note: Tab option box plug-in
*
*/
(function($){
$.fn.extend({
tabBuild:function(options){
return $(this).each(function(){
var defaults={
currentClass:"currentOne",
trigger:"mouseover",
callBack:null,
auto:true,
detay:3000,
index:0
}
var params=$.extend(defaults,options);
var $this=$(this);
var items=$('.tab-menu',$this),i=0;
var autoTimer,curro=0;
items.each(function(){
$(this).data('lvl',i);
if(i==params.index){
$('.tab-content',$this).eq(i).show();
$(this).addClass(params.currentClass);
}else{
$('.tab-content',$this).eq(i).hide();
}
i ;
$(this).bind(params.trigger,function(e){
//移除自动运行
if(params.auto){
if(autoTimer) clearInterval(autoTimer);
}
move($(this).data("lvl"));
//清除冒泡
if (e.stopPropagation) {
e.stopPropagation(); // for Mozilla and Opera
}
else if (window.event) {
window.event.cancelBubble = true; // for IE
}
});
});
//移动播放
function move(i){
//移除上一个效果
items.eq(params.index).removeClass(params.currentClass);
$('.tab-content',$this).eq(params.index).hide();
//移至当前位置
items.eq(i).addClass(params.currentClass);
$('.tab-content',$this).eq(i).show();
params.index=i;
}
//自动运行
function auto(){
if(params.auto){
autoTimer=setInterval(function(){
curro=(params.index>=2)?0:(params.index 1);
move(curro);
},params.detay);
}else{
if(autoTimer) clearInterval(autoTimer);
}
}
auto();
});
}
});
})(jQuery);
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template