Preface: A long time ago have been very busy also haven't written something, recently, the hands of the matter just to tell some passages, the former empty write plug-ins are taken out to share it, hope for everyone some help, but also hope to have a master can help me to write deficiencies and errors, has been writing their own things are in use, In terms of performance, individuals are only as close to the problem as possible ... Sincerely ask for advice;
Introduction: The implementation of the Fade animation effect, you can this plug-in for an additional plug-in can match the front I sent a pop-up layer and so on and so on to increase the interest of JS display,
Usage: In the following JS code in front of the written, we can see the direct copy and paste can be used with a problem can contact me </p
JS code is shown below to copy the following HTML view
[JavaScript]
Copy Code code as follows:
/*
createbytommy_20110525
Emial: @csslife @163.com
Use:
Perform animation effects such as fade
Incoming parameter description:
1, the first parameter is the need to transform the object or ID;
2, the second parameter is an object contains:
1), Sty-> transform the object needs to change the property, the default is to change the width (also can pass non-style properties such as scrolltop, etc.)
2), Curclass-> transform object to complete the change need to add the current class, the default is empty
3), maxval-> change belongs to the maximum value, the default is 0 (if the Curclass for the wide High style property represents hidden), when the property value to be changed to stop animation
4), effect-> to perform the animation effect defaults to Outquad, such as the need to bounce effect to set its value to 2
3. The last parameter is an optional parameter that represents the callback function that runs after the animation has finished executing
*/
Animation
var ani = function () {this.init.apply (this,arguments)}
Ani.prototype = {
_id:function (i) {
if (!i) return;
Return typeof i!= "string" && I.nodetype = = 1? I:document.getelementbyid (i);
},
Init:function (E,s,callback) {
THIS.E = this._id (e);
This.setinit (s| | {});
var maxs = parseint (this.s.maxval), speed = maxs==0? Math.max (This.getsty (this.e,this.s.sty), 1): MAXS/5;
This.fun (Speed,maxs,callback)
},
Formula:function (x) {
var F;
Switch (this.s.effect) {
Case 0:
f = "Outquad";
Break
Case 1:
f = "Inquad";
Break
Case 2:
f = "Bounce";
Break
Default
f = "Easeinback";
}
This.tween ={
Outquad:function (POS) {return Math.pow (POS, 2)},//outquad
Inquad:function (POS) {return-(Math.pow (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 this.tween[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) {
THIS.S = {
Sty: "width",
Curclass: "",
maxval:0,//Effect Maximum Value
effect:1//Execution Effect
}
For (i in s) this.s[i] = s[i];
},
Setsty:function (x) {
var attr = this.s.sty;
if (This.findary (attr)) {
THIS.E.STYLE[ATTR] = x + ' px ';
var isIE6 = navigator.appVersion.indexOf ("MSIE 6") >-1;
isie6&&attr== "Top" && (this.e.style[attr] = x + document.documentElement.scrollTop + ' px ');
}else if (attr== "opacity") {
this.s.maxval===1&& (This.e.style.display = "block");
this.e.style.opacity = x;
This.e.style.filter = "Alpha (opacity=" +x*100+ ")";
}else{
This.e[this.s.sty] = X
}
},
Getsty:function (e,s) {
var val = e.currentstyle?e.currentstyle[s]:d ocument.defaultView.getComputedStyle (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 = math.min (1, (new d-t)/t),
c = _this.s.curclass,
CURC = _this.e.classname;
_this.setsty (+ f + (m-f) * _this.formula (z));
if (z = = 1) {
if (callback && typeof callback = = ' function ') callback ();
_this.s.maxval==0&& (_this.e.getattribute ("style")) && (_this.e.style.display= "none");
if (c!= "" &&curc.indexof (c) <0) _this.e.classname + = C;
Clearinterval (e);
}
},10);
}
}
This is the first DEMO1 of this JS show:
[HTML]
Copy Code code as follows:
<! DOCTYPE html>
<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;p adding:50px 15px;}
</style>
<body>
<div class= "Car-mod" id= "J_car_mod" >
<div class= "Car-menu" > Shopping cart </div>
<div class= "Car-box" id= "J_car_box" >
<div class= "Things" ></div>
</div>
</div>
<script src= "Animation.source.js" ></script>
<script>
(function () {
Call this plugin directly on the line animation.js this is compressed.
var D = Document,carmod = d.getElementById ("J_car_mod"), Carbox = d.getElementById ("J_car_box"), carcontrol=true;
Move into display
Carmod.onmouseover = function (even) {
var even = even | | Window.event,target = Even.target | | Even.srcelement;
if (target.classname== "Car-menu") {
!! carcontrol&& (carobj = new Ani (carbox,{maxval:1,sty: "Opacity"},function () {carcontrol=false;}));
Carobj = null;
}
Move out of hiding
This.onmouseout = function (even) {
var e = even | | Window.event,
RELTG = E.relatedtarget? E.relatedtarget:e.type = ' mouseout '? E.toelement:e.fromelement;
while (RELTG && RELTG!= this) {RELTG = Reltg.parentnode;}
if (RELTG!= this) {
!carcontrol&& (carObj1 = new Ani (carbox,{maxval:0,sty: "Opacity"},function () {carcontrol=true;}));
CarObj1 = null;
}
}
}
})()
</script>
</body>
This is based on the previous pop-up layer of the demo version of the effect, this effect must be copied in front of the pop-up layer of JS-oh part of the code is as follows
[HTML]
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Popup Layer Case </title>
<style>
div{padding:0;margin:0;}
. wra{margin:0 Auto;width:1000px;overflow:hidden;}
. menu{border:1px solid #ccc background: #000; color: #fff; width:250px;height:30px;font:14px/30px ' Microsoft Ya-hei '; Text-align: center;text-shadow:1px 1px 2px #f5f5f5; cursor:pointer;}
. con{border:1px solid #000 background: #fff;p adding: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>
<body>
<div class= "Wra" >
<div id= "J_popup" class= "Menu" > click on pop-up Layer </div>
<div id= "J_popup_con" class= "con" >
<span id= "J_colse" class= "Close" title= "Off" >X</span>
Popup Layer Content
</div>
<script src= "Popup.js" ></script>
<script src= "Animation.source.js" ></script>
<script>
var D = Document,m = d.getElementById ("J_popup"), con = d.getElementById ("J_popup_con"), cl = d.getElementById ("J_colse") ;
New Popup (M,con,cl,{addfun:function () {new Ani ("J_popup_con", {sty: "Top", Maxval: "All", Effect:2})},callback: function () {con.style.display= ' block '; new ani (' J_popup_con ', {sty: ' Top ', Maxval: ' 0}}}})
</script>
</div>
</body>
