Preface: I have been very busy some time ago and haven’t written anything for a long time. Recently, I have just finished some of my work. I will share all the empty writing plug-ins I used to write. I hope it will be helpful to everyone. I also hope that some experts can help me to guide my writing shortcomings and errors. I have always used the things I wrote myself. In terms of performance, I can only try to get close to the problems as much as possible... I sincerely ask for advice;
Plugin introduction: Execute animation effects such as fading. This plugin can be an additional plugin. It can be used to increase the fun of JS display with a pop-up layer I posted earlier, etc.
How to use: I wrote it in the js code below. You can check it out and copy it directly and use it. If you have any questions, please contact me</p
The JS code is as follows. You can copy the HTML below to view it.
[javascript]
Copy the codeThe code is as follows:
/*
createByTommy_20110525
emial:@csslife@
Purpose:
Execute animation effects such as fading
Incoming parameter description:
1. The first parameter is the object or ID that needs to be transformed;
2. The second parameter is an object containing:
1) sty->The properties that need to be changed in the transform object are changed by default (there can also be passed on non-style attributes such as scrollTop, etc.)
2) curClass->The current class that needs to be added after the transformation object is completed, the default is empty
3) maxVal-> Change the maximum value of the belongings, the default is 0 (if curClass is a width and height style attribute, it means hidden), stop the animation when the value of the property to be changed reaches
4) Effect->The animation effect executed by default is outQuad. If you need to bounce the effect, set its value to 2.
3. The last parameter is an optional parameter to represent the callback function that runs after the animation is executed.
*/
//animation
var ani = function(){(this,arguments)}
= {
_id:function(i){
if(!i) return;
return typeof i != "string" && === 1 ? i : (i);
},
init:function(e,s,callback){
= this._id(e);
(s||{});
var maxS = parseInt(),speed = maxS==0?((,),1):maxS/5;
(speed,maxS,callback)
},
formula:function(x){
var f;
switch(){
case 0:
f = "outQuad";
break;
case 1:
f = "inQuad";
break;
case 2:
f = "bounce";
break;
default:
f = "easeInBack";
}
={
outQuad:function(pos){return (pos, 2)},//outQuad
inQuad:function(pos){return -(((pos-1),2)-1)},//inQuad
bounce:function(pos){//bounce
if (pos < (1 / 2.75)) {
return (7.5625 * pos * pos);
} else if (pos < (2 / 2.75)) {
return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
} else if (pos < (2.5 / 2.75)) {
return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
} else {
return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
}
},
easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s + 1) * pos - s);}
};
return [f](x);
},
findAry:function(attr){
var rg = ["width","height","top","bottom","left","right","margin","padding"];
for(var z in rg){
if(rg[z]==attr) return true;
}
return false;
},
setInit:function(s){
= {
sty:"width",
curClass:"",
maxVal:0,//maximum effect
effect:1//Execution effect
}
for(i in s) [i] = s[i];
},
setSty:function(x){
var attr = ;
if((attr)){
[attr] = x + 'px';
var isIE6 = ("MSIE 6")>-1;
isIE6&&attr=="top"&&([attr] = x + + 'px');
}else if(attr=="opacity"){
===1&&( = "block");
= x;
= "alpha(opacity="+x*100+")";
}else{
[] = x
}
},
getSty:function(e,s){
var val = ?[s]:(e,null)[s];
return parseInt(val)||0;
},
fun:function(f,m,callback){
var D = Date,t = new D,e,T = 500,_this = this;
return e = setInterval(function() {
var z = (1, (new D - t) / T),
c = _this.,
curC = _this.;
_this.setSty( + f + (m - f) * _this.formula(z));
if (z == 1) {
if (callback && typeof callback == 'function') callback();
_this.==0&&(_this.("style"))&&(_this.="none");
if(c!=""&&(c)<0)_this. += c;
clearInterval(e);
}
},10);
}
}
This is the first DEMO1 displayed in this js:
[html]
Copy the codeThe code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>test</title>
<style>
div,h6,body{padding:0;margin:0;}
div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}
.car-mod{position:relative;width:200px;}
.car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;}
.car-box{border:2px solid #c06;width:300px;display:none;}
.car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);}
.things{border-top:1px solid #ccc;padding:50px 15px;}
</style>
</head>
<body>
<div class="car-mod" >
<div class="car-menu">Shopping cart</div>
<div class="car-box" >
<h6>My shopping cart</h6>
<div class="things"></div>
</div>
</div>
<script src=""></script>
<script>
(function(){
//When calling this plugin online, it is compressed.
var D = document,carMod = ("J_car_mod"),carBox = ("J_car_box"),carControl=true;
//Move in to display
= function(even){
var even = even || ,target = || ;
if(=="car-menu"){
!!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"},function(){carControl=false;}));
carObj = null;
}
//Move out to hide
= function(even){
var e = even || ,
reltg = ? : == 'mouseout' ? : ;
while (reltg && reltg != this){reltg = ;}
if(reltg != this){
!carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;}));
carObj1 = null;
}
}
}
})()
</script>
</body>
</html>
This is based on the demo version of the previous pop-up layer. This effect must be copied from the js code of the previous pop-up layer as follows
[html]
Copy the codeThe code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Pop layer example</title>
<style>
div{padding:0;margin:0;}
.wra{margin:0 auto;width:1000px;overflow:hidden;}
.menu{border:1px solid #ccc;background:#000;color:#ffff;width:250px;height:30px;font:14px/30px 'Microsoft Yahei';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;}
.con{border:1px solid #000;background:#fff;padding:30px;width:500px;height:200px;position:fixed;top:-150%;left:50%;margin:-100px 0 0 -250px;display:none;z-index:999;}
.close{display:block;position:absolute;right:10px;top:10px;cursor:pointer;font:bold 14px Arial;-moz-transition:-moz-transform .5s ease-in 0s;}
.close:hover{-moz-transform:rotate(360deg);}
</style>
<style>
</style>
</head>
<body>
<div class="wra">
<div class="menu">Click on the pop-up layer</div>
<div class="con">
<span class="close" title="close">X</span>
Pop-up layer content
</div>
<script src=""></script>
<script src=""></script>
<script>
var D = document,m = ("J_popup"),con = ("J_popup_con"),cl = ("J_colse");
new Popup(m,con,cl,{addFun:function(){new ani("J_popup_con",{sty:"top",maxVal:"350",effect:2})},callBack:function(){="block";new ani("J_popup_con",{sty:"top",maxVal:"0"})}})
</script>
</div>
</body>
</html>