You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
9.4 KiB
319 lines
9.4 KiB
|
|
(function($){
|
|
$.fn.num = function(options){
|
|
_this = $(this)
|
|
var _thisTop,_thisRight,_thisBottom,_thisLeft,_thisTopBottom,_thisRightLeft,_thisAll
|
|
|
|
n1 = _this.width();
|
|
h1 = _this.height();
|
|
|
|
var defaults = {
|
|
Type:'num1',
|
|
Color:'#ff0000',
|
|
speed:300,
|
|
}
|
|
var options = $.extend({},defaults,options)
|
|
var becurr = "background:"+options.Color+";position:absolute;border-radius:10px;opahide;"
|
|
switch(options.Type){
|
|
case 'num1':
|
|
num1()
|
|
break;
|
|
case 'num2':
|
|
num2()
|
|
break;
|
|
case 'num3':
|
|
num3()
|
|
break;
|
|
case 'num4':
|
|
num4()
|
|
break;
|
|
case 'num5':
|
|
num5()
|
|
break;
|
|
case 'num6':
|
|
num6()
|
|
break;
|
|
case 'num7':
|
|
num7()
|
|
break;
|
|
case 'num8':
|
|
num8()
|
|
break;
|
|
case 'num9':
|
|
num9()
|
|
break;
|
|
case 'num10':
|
|
num10()
|
|
break;
|
|
case 'num11':
|
|
num10()
|
|
break;
|
|
}
|
|
|
|
function than(_this){
|
|
var obj = new Object();
|
|
obj.name = '123'
|
|
obj.thsn = function(){
|
|
_thisTop = _this.find('.divTop').stop().show()
|
|
_thisRight = _this.find('.divRight').stop().show()
|
|
_thisBottom = _this.find('.divBottom').stop().show()
|
|
_thisLeft = _this.find('.divLeft').stop().show()
|
|
_thisTopBottom = _this.find('.divTop,.divBottom').stop().show()
|
|
_thisRightLeft = _this.find('.divLeft,.divRight').stop().show()
|
|
_thisAll = _this.find('.divTop,.divBottom,.divLeft,.divRight').stop().show()
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
var opashow = 'opashow',opahide = 'opahide'
|
|
function num1(){
|
|
var becurr = "background:"+options.Color+";position:absolute;"
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top:-2px;left:-2px;width:0px;height:2px' class='divTop'></div>";
|
|
|
|
// right杈规
|
|
var divRight ="<div style='"+becurr+"bottom:-2px;right:-2px;width:2px;height:0px;' class='divRight'></div>";
|
|
|
|
// Bottom杈规
|
|
var divBottom ="<div style='"+becurr+"bottom:-2px;right:-2px;width:0px;height:2px' class='divBottom'></div>";
|
|
|
|
// Left杈规
|
|
var divLeft ="<div style='"+becurr+"top:-2px;left:-2px;width:2px;height:0px;' class='divLeft'></div>";
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divTop,divRight,divBottom,divLeft);
|
|
num1 = new than(el)
|
|
num1.thsn()
|
|
_thisTopBottom.animate({width:n1+3.5,opashow},options.speed)
|
|
_thisRightLeft.animate({height:h1+3.5,opashow},options.speed);
|
|
},function(){
|
|
_thisTopBottom.animate({width:0,opahide},options.speed)
|
|
_thisRightLeft.animate({height:0,opahide},options.speed,function(){
|
|
_thisAll.remove()
|
|
});
|
|
})
|
|
}
|
|
|
|
function num2(){
|
|
// top杈规
|
|
var divTop = "<div style='"+becurr+"height:2px;width:50px;top:-2px;left:-80px;' class='divTop'></div";
|
|
|
|
// right杈规
|
|
var divRight = "<div style='"+becurr+"height:50px;width:2px;top:-80px;right:-2px;' class='divRight'></div";
|
|
|
|
// Bottom杈规
|
|
var divBottom = "<div style='"+becurr+"height:2px;width:50px;bottom:-2px;right:-80px;' class='divBottom'></div";
|
|
|
|
// Left杈规
|
|
var divLeft = "<div style='"+becurr+"height:50px;width:2px;bottom:-80px;left:-2px;' class='divLeft'></div";
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divTop,divRight,divBottom,divLeft);
|
|
num2 = new than(el)
|
|
num2.thsn()
|
|
_thisTop.animate({left:-2,},options.speed).fadeOut(0)
|
|
_thisRight.animate({top:-2},options.speed).fadeOut(0)
|
|
_thisBottom.animate({right:-2,},options.speed).fadeOut(0)
|
|
_thisLeft.animate({bottom:-2,},options.speed).fadeOut(0);
|
|
},function(){
|
|
_thisTop.show().animate({left:-80},options.speed).hide(0)
|
|
_thisRight.show().animate({top:-80},options.speed).hide(0)
|
|
_thisBottom.show().animate({right:-80},options.speed).hide(0)
|
|
_thisLeft.show().animate({bottom:-80},options.speed,function(){
|
|
_thisAll.remove()
|
|
}).hide(0);
|
|
})
|
|
}
|
|
|
|
function num3(){
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top:-2px;left:-2px;width:0px;height:2px' class='divTop'></div>";
|
|
|
|
// right杈规
|
|
var divRight ="<div style='"+becurr+"top:-2px;right:-2px;width:2px;height:0px;' class='divRight'></div>";
|
|
|
|
// Bottom杈规
|
|
var divBottom ="<div style='"+becurr+"bottom:-2px;right:-2px;width:0px;height:2px' class='divBottom'></div>";
|
|
|
|
// Left杈规
|
|
var divLeft ="<div style='"+becurr+"bottom:-2px;left:-2px;width:2px;height:0px;' class='divLeft'></div>";
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divTop,divRight,divBottom,divLeft);
|
|
num3 = new than(el)
|
|
num3.thsn()
|
|
_thisTopBottom.animate({width:n1+3.5},options.speed);
|
|
_thisRightLeft.animate({height:h1+3.5},options.speed);
|
|
},function(){
|
|
_thisTopBottom.animate({width:0},options.speed);
|
|
_thisRightLeft.animate({height:0},options.speed,function(){
|
|
_thisAll.remove()
|
|
});
|
|
})
|
|
}
|
|
|
|
function num4(){
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top:-2px;left:-2px;width:0px;height:2px' class='divTop'></div>";
|
|
|
|
// right杈规
|
|
var divRight ="<div style='"+becurr+"top:-2px;right:-2px;width:2px;height:0px;' class='divRight'></div>";
|
|
|
|
// Bottom杈规
|
|
var divBottom ="<div style='"+becurr+"bottom:-2px;right:-2px;width:0px;height:2px' class='divBottom'></div>";
|
|
|
|
// Left杈规
|
|
var divLeft ="<div style='"+becurr+"bottom:-2px;left:-2px;width:2px;height:0px;' class='divLeft'></div>";
|
|
_this.hover(function(){
|
|
el =$(this)
|
|
el.append(divTop,divRight,divBottom,divLeft);
|
|
num4 = new than(el)
|
|
num4.thsn()
|
|
_thisTop.animate({width:n1+3.5},options.speed,function(){
|
|
_thisRight.animate({height:h1+3.5},options.speed,function(){
|
|
_thisBottom.animate({width:n1+3.5},options.speed,function(){
|
|
_thisLeft.animate({height:h1+3.5},options.speed)
|
|
});
|
|
});
|
|
})
|
|
},function(){
|
|
_thisAll.stop()
|
|
_thisLeft.animate({height:0},options.speed,function(){
|
|
_thisBottom.animate({width:0},options.speed,function(){
|
|
_thisRight.animate({height:0},options.speed,function(){
|
|
_thisTop.animate({width:0},options.speed,function(){
|
|
_thisAll.remove()
|
|
})
|
|
});
|
|
});
|
|
})
|
|
|
|
})
|
|
}
|
|
|
|
function num5(){
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top:-2px;left:-2px;width:0px;height:2px' class='divTop'></div>";
|
|
|
|
// right杈规
|
|
var divRight ="<div style='"+becurr+"top:-2px;right:-2px;width:2px;height:0px;' class='divRight'></div>";
|
|
|
|
// Bottom杈规
|
|
var divBottom ="<div style='"+becurr+"bottom:-2px;right:-2px;width:0px;height:2px' class='divBottom'></div>";
|
|
|
|
// Left杈规
|
|
var divLeft ="<div style='"+becurr+"bottom:-2px;left:-2px;width:2px;height:0px;' class='divLeft'></div>";
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divTop,divRight,divBottom,divLeft);
|
|
num5 = new than(el)
|
|
num5.thsn()
|
|
_thisTopBottom.animate({width:n1+3.5},options.speed,function(){
|
|
_thisRightLeft.animate({height:h1+3.5},options.speed);
|
|
});
|
|
|
|
},function(){
|
|
_thisTopBottom.animate({width:0},options.speed,function(){
|
|
_thisRightLeft.animate({height:0},options.speed,function(){
|
|
_thisAll.remove()
|
|
});
|
|
});
|
|
|
|
})
|
|
}
|
|
|
|
function num6(){
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top:-2px;left:"+n1/2+"px;width:0;height:2px' class='divTop'></div>";
|
|
|
|
// right杈规
|
|
var divRight ="<div style='"+becurr+"top:"+h1/2+"px;right:-2px;width:2px;height:0;' class='divRight'></div>";
|
|
|
|
// Bottom杈规
|
|
var divBottom ="<div style='"+becurr+"bottom:-2px;right:"+n1/2+"px;width:0;height:2px' class='divBottom'></div>";
|
|
|
|
// Left杈规
|
|
var divLeft ="<div style='"+becurr+"bottom:"+h1/2+"px;left:-2px;width:2px;height:0;' class='divLeft'></div>";
|
|
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divTop,divRight,divBottom,divLeft);
|
|
num6 = new than(el)
|
|
num6.thsn()
|
|
_thisTopBottom.animate({width:n1+3.5,left:-2},options.speed);
|
|
_thisRightLeft.animate({height:h1+3.5,top:-2},options.speed);
|
|
},function(){
|
|
_thisTopBottom.animate({width:0,left:n1/2},options.speed);
|
|
_thisRightLeft.animate({height:0,top:h1/2},options.speed,function(){
|
|
_thisAll.remove()
|
|
});
|
|
})
|
|
}
|
|
|
|
|
|
function num7(){
|
|
|
|
|
|
_this.hover(function(){
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top: 0;left: 0;width: 100%;right: 0;bottom: 0;height: 0;margin: auto;border-radius:0;' class='divTop'></div>";
|
|
el = $(this)
|
|
el.append(divTop);
|
|
num7 = new than(el)
|
|
num7.thsn()
|
|
_thisTop.animate({height:'100%'},options.speed)
|
|
},function(){
|
|
_thisTop.animate({height:'0'},options.speed,function(){
|
|
_thisTop.remove()
|
|
})
|
|
})
|
|
}
|
|
|
|
function num8(){
|
|
// top杈规
|
|
var divRight ="<div style='"+becurr+"top: 0;left: 0;right: 0;bottom: 0;width: 0;height: 100%;margin: auto;border-radius:0;' class='divRight'></div>";
|
|
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divRight);
|
|
num7 = new than(el)
|
|
num7.thsn()
|
|
_thisRight.animate({width:'100%'},options.speed)
|
|
},function(){
|
|
_thisRight.animate({width:'0'},options.speed,function(){
|
|
_thisRight.remove()
|
|
})
|
|
})
|
|
}
|
|
|
|
function num9(){
|
|
// top杈规
|
|
var divTop ="<div style='"+becurr+"top: 0;left: 0;right: 0;bottom: 0;width: 0;height: 0;margin: auto;border-radius:0;' class='divTop'></div>";
|
|
|
|
|
|
_this.hover(function(){
|
|
el = $(this)
|
|
el.append(divTop);
|
|
num7 = new than(el)
|
|
num7.thsn()
|
|
_thisTop.animate({width:'100%',height:'100%'},options.speed)
|
|
},function(){
|
|
_thisTop.animate({width:'0',height:'0'},options.speed,function(){
|
|
_thisTop.remove()
|
|
})
|
|
})
|
|
}
|
|
|
|
}
|
|
})(jQuery);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|