Back to the point, like jquery's Easy-to-use API style? What kind of style is that? Personally think it's more important to have two points, one is that chained calls to DOM operations are queued and not only makes the readable semantics of the code easy to understand, but also eliminates the way in which callbacks are nested in callbacks in multiple chained operations of the same DOM element, which is important.
The second is the bulk operation of the element, which is built on its powerful selector. The JQ selector is very powerful, it is known to all, it is not much to say. And certainly not a day or two can be achieved, so the following is the two points I said about my views.
Based on its powerful selector, all of jquery's DOM operations rely on an array of its selectors, which many people like to call JQ objects. Let's call it that for the time being. All DOM operations then depend on the concurrent batch execution of each element of the JQ object. For each DOM operation, most of them are in a chain-type callback state, that is, in this method chain, the order in which they are executed is directly based on the order of the method calls in the chain. This method of chain and serial form is a major feature of it.
So many people like to use jquery, the basic look at it two o'clock, the selector is really powerful, chained call is really convenient and easy, the logic of the code instantly become simple. Because he put a lot of code logic into their own internal to deal with, leaving the coder to consider the problem is much less, so on the one hand you feel good at the same time, also lost a exercise coding logic opportunities. So I don't advise beginners to learn to use jquery or other frameworks directly, because they will make you less aware of JS. My point is that all of the frameworks or libraries are used to improve development efficiency and management convenience rather than learning. (except for the source of research, of course).
So, since you think jquery's API style works, then why don't we try to build this kind of API style? (Disclaimer: The following attempts are simply to provide an idea that the code is not perfect ...) ）
Copy Code code as follows:
var get = function (IDs) {
var d = document, A =-1;
This.elements = [];
if (typeof IDs!= ' string ' &&!! Ids.length) {
for (var i=0; i<ids.length; i++) {
var id = ids[i], o;
o = typeof id = = ' string '? d.getElementById (ID): ID;
This.elements.push (o);
}
} else {
while (typeof arguments[++a] = = ' string ') {
This.elements.push (d.getElementById (arguments[a));
}
}
}
And then expand some of the methods for manipulating the DOM
Copy Code code as follows:
Get.prototype = {
Each:function () {},
Animate:function () {}
}
Of course, this is not the same way as jquery, but it's understandable, and jquery might look like this:
Copy Code code as follows:
JQuery = Window.jquery = window.$ = function (selector, context) {
Return to New JQuery.fn.init (selector, context);
}
Jquery.fn = Jquery.prototype = {
Init:function (Selector, context) {}
}
The next step in bulk operations on the acquired queue is the inevitable need for each traversal method.
Copy Code code as follows:
Each:function (FN) {
for (var i=0; i<this.elements.length; i++) {
Fn.call (this, this.elements[i])
}
return this;
},
Each method for Get.prototype expansion provides a parameter function and traverses the DOM list to bind the function to each element. Then let it return to Get.prototype, because the prototype itself has a property similar to "superclass", so any method returned to the prototype object can continue to invoke the prototype extension out of the method.
To make this effort more meaningful, let's do a animate function. This function is a common method of jquery for DOM operations, and with it, most animations become so simple and easy. The following will be a simple implementation:
Copy Code code as follows:
Animate:function (config) {
if (!this.animqueue) this.animqueue = Hr._animqueue = [];
var a = 0, time, tween, ease, callback;
while (Arguments[++a]) {
if (typeof arguments[a] = = ' number ') time = Arguments[a];
if (typeof arguments[a] = = ' string ') {
if (/^ease*/.test (Arguments[a])) ease = Arguments[a];
else tween = Arguments[a];
}
if (Hr.isfunction (Arguments[a])) callback = Arguments[a];
}
This.animQueue.push ({
Config:config,
Time:time,
Tween:tween,
Ease:ease,
Callback:callback
});
if (this.animQueue.length = = 1) this.execute (this.animqueue);
return this;
},
Just look at this paragraph may not see the clue, yes, because to like jquery as a serial chain of methods, you need a temporary queue to operate, or even if the method chain is formed, but these methods are parallel, do not achieve the desired effect. So the above section of code is mainly to deal with Animate pushed into the queue of a logic, and then the parameters arguments made some judgments, so that when writing parameters can be more casual, in addition to the first parameter and the last callback, the remaining parameters do not take into account the location and whether required to enhance ease of use.
The core transformation function is on execute,
Copy Code code as follows:
Execute:function (queue) {
var _this = this, M = 0, n = 0,
_anim = function (El, key, from, to, at, TW, ease, CB) {
var Isop = (Key = = ' opacity ' &&! HR.support.opacity), _key = key;
if (isop) {to = to*100; _key = ' Filter '}
var s = +new Date,
D = at,
b = parsefloat (from) | | 0,
c = To-b;
(function () {
var t = +new date-s;
if (T >= d) {
n + +;
t = D;
El.style[_key] = (isop? ' Alpha (opacity= ': ') + tween.linear (T, B, C, D) + (key!= ' opacity '?) ' px ': ' + (Isop? ')' : '');
!! CB && cb.apply (EL);
if (m = = n && _this.animqueue.length > 1) {
_this.animqueue.shift ();
_this.execute (_this.animqueue);
}
Return
}
El.style[_key] = (isop? ' Alpha (opacity= ': ') + tween[tw][ease] (T, B, C, D) + (key!= ' opacity '? ' px ': ' + (Isop? ')' : '');
if (! Hr.timers[el.id]) hr.timers[el.id] = [];
Hr.timers[el.id].push (settimeout (Arguments.callee, 16));
})();
},
_q = this.animqueue[0];
Return This.each (function (EL) {
For (var k in _q.config) {
m + +;
_anim (EL,
K
K = = ' opacity ' &&! HR.support.opacity? Hr.getstyle (' filter ', el) = = '? 100:parseint (Hr.getstyle (' Filter ', El). Match (/\d{1,3}/g) [0]): Hr.getstyle (K, EL),
_q.config[k],
typeof _q.time = = ' number '? _q.time:1000,
typeof _q.tween = = ' String ' &&!/^ease*/.test (_q.tween)? _q.tween: ' Quart ',
typeof _q.ease = = ' String ' &&/^ease*/.test (_q.ease)? _q.ease: ' Easeout ',
_q.callback)
}
});
}
This section seems to be a bit more complicated, and the most fundamental change is the _anim of this private function. The rest of the code is basically doing some bulk operations, and transparency change compatibility, and whether the current transformation has completed the function. Combined with these two paragraphs, the basic realization of the jquery animate effect. Belong to a simplified version.
Of course, we can not forget the important point is that, since the transformation, there must be a stop method to make this transformation controllable, otherwise the availability of this code will be greatly compromised, refer to the following code:
Copy Code code as follows:
Stop:function (clearqueue) {
if (clearqueue) hr._animqueue.length = 0;
This.each (function (EL) {
if (!! Hr.timers[el.id])
for (var i=0 i});
return this;
},
Set up special temporary timer storage for different DOM element IDs, Hr.timers[el.id], then traverse the current DOM list and clear the corresponding timer. The parameter clearqueue is used as an optional parameter to control whether the animate is cleared for subsequent execution.
To make this approach a bit more fun, I added several extra easing modes, jquery has only one swing, and all the easing algorithms are placed in the tween object for use. The following is my test source code, (if there are flaws, you forgive me)
Copy Code code as follows:
/* =========== Animate JS ============ * *
/* @author: Hongru.chen * *
/* =================================== */
if (typeof HR = = ' undefined ' | | |!hr)
HR = {
Extend:function (destination, source, override) {
if (override = = #ff0000) override = true;
For (Var property in source) {
if (override | |!) ( property in destination)) {
Destination[property] = Source[property];
}
}
return destination;
}
};
(function () {
var Tween = {//The following operator parameters are respectively: T: Run time, B: Start, C: Total change, D: Total time
Linear:function (t,b,c,d) {return c*t/d + B;},
Quad: {
Easein:function (t,b,c,d) {
Return c* (T/=d) *t + b;
},
Easeout:function (t,b,c,d) {
Return-c * (t/=d) * (t-2) + B;
},
Easeinout:function (t,b,c,d) {
if ((T/=D/2) < 1) return c/2*t*t + B;
RETURN-C/2 * ((--T) * (t-2)-1) + B;
}
},
Cubic: {
Easein:function (t,b,c,d) {
Return c* (T/=d) *t*t + b;
},
Easeout:function (t,b,c,d) {
Return c* ((t=t/d-1) *t*t + 1) + B;
},
Easeinout:function (t,b,c,d) {
if ((T/=D/2) < 1) return c/2*t*t*t + B;
Return c/2* ((t-=2) *t*t + 2) + B;
}
},
Quart: {
Easein:function (t,b,c,d) {
Return c* (T/=d) *t*t*t + b;
},
Easeout:function (t,b,c,d) {
Return-c * ((t=t/d-1) *t*t*t-1) + B;
},
Easeinout:function (t,b,c,d) {
if ((T/=D/2) < 1) return c/2*t*t*t*t + B;
RETURN-C/2 * ((t-=2) *t*t*t-2) + B;
}
},
Quint: {
Easein:function (t,b,c,d) {
Return c* (T/=d) *t*t*t*t + b;
},
Easeout:function (t,b,c,d) {
Return c* ((t=t/d-1) *t*t*t*t + 1) + B;
},
Easeinout:function (t,b,c,d) {
if ((T/=D/2) < 1) return c/2*t*t*t*t*t + B;
Return c/2* ((t-=2) *t*t*t*t + 2) + B;
}
},
Sine: {
Easein:function (t,b,c,d) {
Return-c * Math.Cos (T/D * (MATH.PI/2)) + C + B;
},
Easeout:function (t,b,c,d) {
Return c * Math.sin (T/D * (MATH.PI/2)) + B;
},
Easeinout:function (t,b,c,d) {
RETURN-C/2 * (Math.Cos (MATH.PI*T/D)-1) + B;
}
},
Expo: {
Easein:function (t,b,c,d) {
Return (t==0)? B:C * MATH.POW (2, * (T/D-1)) + B;
},
Easeout:function (t,b,c,d) {
Return (T==d)? B+C:C * (-math.pow (2, -10 * t/d) + 1) + B;
},
Easeinout:function (t,b,c,d) {
if (t==0) return B;
if (T==d) return b+c;
if ((T/=D/2) < 1) return C/2 * MATH.POW (2, * (t-1)) + B;
Return C/2 * (-math.pow (2, -10 *--t) + 2) + B;
}
},
CIRC: {
Easein:function (t,b,c,d) {
Return-c * (MATH.SQRT (1-(T/=d) *t)-1) + B;
},
Easeout:function (t,b,c,d) {
Return c * MATH.SQRT (1-(t=t/d-1) *t) + B;
},
Easeinout:function (t,b,c,d) {
if ((T/=D/2) < 1) RETURN-C/2 * (MATH.SQRT (1-t*t)-1) + B;
Return C/2 * (MATH.SQRT (1-(t-=2) *t) + 1) + B;
}
},
Elastic: {
Easein:function (t,b,c,d,a,p) {
if (t==0) return B; if ((T/=d) ==1) return b+c; if (!p) p=d*.3;
if (!a | | A < Math.Abs (c)) {a=c; var S=p/4;}
else var s = p/(2*math.pi) * Math.asin (C/A);
Return-(A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p)) + B;
},
Easeout:function (t,b,c,d,a,p) {
if (t==0) return B; if ((T/=d) ==1) return b+c; if (!p) p=d*.3;
if (!a | | A < Math.Abs (c)) {a=c; var S=p/4;}
else var s = p/(2*math.pi) * Math.asin (C/A);
Return (A*MATH.POW (2,-10*t) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + C + B);
},
Easeinout:function (t,b,c,d,a,p) {
if (t==0) return B; if ((T/=D/2) ==2) return b+c; if (!p) p=d* (. 3*1.5);
if (!a | | A < Math.Abs (c)) {a=c; var S=p/4;}
else var s = p/(2*math.pi) * Math.asin (C/A);
if (T < 1) return-.5* (A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p)) + B;
Return A*math.pow (2,-10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p) *.5 + C + B;
}
},
Back: {
Easein:function (t,b,c,d,s) {
if (s = = undefined) s = 1.70158;
Return c* (T/=d) *t* ((s+1) *t-s) + B;
},
Easeout:function (t,b,c,d,s) {
if (s = = undefined) s = 1.70158;
Return c* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + B;
},
Easeinout:function (t,b,c,d,s) {
if (s = = undefined) s = 1.70158;
if ((T/=D/2) < 1) return c/2* (t*t* ((s*= (1.525)) +1)) + B;
Return c/2* ((t-=2) *t* (((s*= (1.525)) +1) *t + s) + 2) + B;
}
},
Bounce: {
Easein:function (t,b,c,d) {
Return C-tween.bounce.easeout (d-t, 0, C, D) + B;
},
Easeout:function (t,b,c,d) {
if ((T/=d) < (1/2.75)) {
Return c* (7.5625*t*t) + B;
else if (T < (2/2.75)) {
Return c* (7.5625* (t-= (1.5/2.75)) *t +.) + B;
else if (T < (2.5/2.75)) {
Return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b;
} else {
Return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b;
}
},
Easeinout:function (t,b,c,d) {
if (T < D/2) return Tween.Bounce.easeIn (t*2, 0, C, D) *. 5 + b;
else return Tween.Bounce.easeOut (t*2-d, 0, C, D) *. 5 + c*.5 + B;
}
}
}
var get = function (IDs) {
var d = document, A =-1;
This.elements = [];
if (typeof IDs!= ' string ' &&!! Ids.length) {
for (var i=0; i<ids.length; i++) {
var id = ids[i], o;
o = typeof id = = ' string '? d.getElementById (ID): ID;
This.elements.push (o);
}
} else {
while (typeof arguments[++a] = = ' string ') {
This.elements.push (d.getElementById (arguments[a));
}
}
}
Get.prototype = {
Each:function (FN) {
for (var i=0; i<this.elements.length; i++) {
Fn.call (this, this.elements[i])
}
return this;
},
Setstyle:function (P, v) {
This.each (function (EL) {
El.style[p] = v;
});
return this;
},
Show:function () {
var _this = this;
This.each (function (EL) {
_this.setstyle (' Display ', ' block ');
})
return this;
},
Hide:function () {
var _this = this;
This.each (function (EL) {
_this.setstyle (' Display ', ' none ');
})
return this;
},
Animate:function (config) {
if (!this.animqueue) this.animqueue = Hr._animqueue = [];
var a = 0, time, tween, ease, callback;
while (Arguments[++a]) {
if (typeof arguments[a] = = ' number ') time = Arguments[a];
if (typeof arguments[a] = = ' string ') {
if (/^ease*/.test (Arguments[a])) ease = Arguments[a];
else tween = Arguments[a];
}
if (Hr.isfunction (Arguments[a])) callback = Arguments[a];
}
This.animQueue.push ({
Config:config,
Time:time,
Tween:tween,
Ease:ease,
Callback:callback
});
if (this.animQueue.length = = 1) this.execute (this.animqueue);
return this;
},
Stop:function (clearqueue) {
if (clearqueue) hr._animqueue.length = 0;
This.each (function (EL) {
if (!! Hr.timers[el.id])
for (var i=0 i<hr.timers[el.id].length; i++) cleartimeout (hr.timers[el.id][i))
});
return this;
},
Execute:function (queue) {
var _this = this, M = 0, n = 0,
_anim = function (El, key, from, to, at, TW, ease, CB) {
var Isop = (Key = = ' opacity ' &&! HR.support.opacity), _key = key;
if (isop) {to = to*100; _key = ' Filter '}
var s = +new Date,
D = at,
b = parsefloat (from) | | 0,
c = To-b;
(function () {
var t = +new date-s;
if (T >= d) {
n + +;
t = D;
El.style[_key] = (isop? ' Alpha (opacity= ': ') + tween.linear (T, B, C, D) + (key!= ' opacity '?) ' px ': ' + (Isop? ')' : '');
!! CB && cb.apply (EL);
if (m = = n && _this.animqueue.length > 1) {
_this.animqueue.shift ();
_this.execute (_this.animqueue);
}
Return
}
El.style[_key] = (isop? ' Alpha (opacity= ': ') + tween[tw][ease] (T, B, C, D) + (key!= ' opacity '? ' px ': ' + (Isop? ')' : '');
if (! Hr.timers[el.id]) hr.timers[el.id] = [];
Hr.timers[el.id].push (settimeout (Arguments.callee, 16));
})();
},
_q = this.animqueue[0];
Return This.each (function (EL) {
For (var k in _q.config) {
m + +;
_anim (EL,
K
K = = ' opacity ' &&! HR.support.opacity? Hr.getstyle (' filter ', el) = = '? 100:parseint (Hr.getstyle (' Filter ', El). Match (/\d{1,3}/g) [0]): Hr.getstyle (K, EL),
_q.config[k],
typeof _q.time = = ' number '? _q.time:1000,
typeof _q.tween = = ' String ' &&!/^ease*/.test (_q.tween)? _q.tween: ' Quart ',
typeof _q.ease = = ' String ' &&/^ease*/.test (_q.ease)? _q.ease: ' Easeout ',
_q.callback)
}
});
}
}
Hr.extend (HR, {
Get:function () {
Return to new get (arguments);
},
Isfunction:function (o) {
Return typeof (O) = = ' function ' && (! Function.prototype.call | | typeof (O.call) = = ' function ');
},
Getstyle:function (P, el) {
Return El.currentstyle? EL.CURRENTSTYLE[P]: Document.defaultView.getComputedStyle (EL, null). GetPropertyValue (P);
},
Support: (function () {
try {
var d = document.createelement (' div ');
d.style[' Display ' = ' none ';
d.innerhtml = ' <a style= ' float:left; opacity:.5; " ></a> ';
var a = D.getelementsbytagname (' a ') [0];
return {
Opacity:a.style.opacity = = ' 0.5 '
}
finally {
d = null;
}
})(),
Timers: {}
});
})();
Then in order to let everyone see the intuitive point, small did two demo
"Demo1"
<!doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <script type= text/javascript" src= "Http://files.cnblogs.com/hongru/animate.js" ></ Script><style type= "Text/css" > #me, #you {border:2px solid #333; margin-bottom:10px; Position:absolute; Overflow:hidden; #me {left:0 top:0} #you {left:0; top:300px} </style> </head> <body> <div id= "Me" >fasdf <br>fasdf<br>fasdf<br>fasdf<br>fasdf<br>fasdf<br></div> <div id= " ">fasdf<br>fasdf<br></div> <input type=" button "value=" Stop "onclick=" hr.get (' Me ', ' you ' ). Stop (). Animate ({top:100}) "/> <script type=" Text/javascript "> onload = function () {Hr.get (' me ', ' you '). Anim Ate ({width:500, height:100},2000, function () {this.style.backgroundcolor= ' #333 '}). Animate ({top:200}, ' Easein '). Animate ({left:100,opacity:0.2},function () {This.style.borDercolor= ' Red '}. Animate ({width:200, height:200, left:300, Top:200},function () {hr.get (' me '). Animate ({width:400, height:100, Top:10, Left:10, opacity:0.8},2000); Hr.get (' you '). Animate ({height:400}, ' Bounce ', ' Easein ', Watts)})} </script></body> </html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
"Demo2"
<! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <script type=" Text/javascript "> Self.moveto (0,0) Self.resizeto (Screen.availWidth, Screen.availheight) onresize = function () {return false;} </script><title>super animate</title> <meta name= "Author" content= "Hongru.chen"/> < Script type= "Text/javascript" src= "http://files.cnblogs.com/hongru/animate.js" ></script><style type= " Text/css "> HTML, body {Overflow:hidden} body, H1, H2, H3, H4, H5, H6, P, UL, DL, OL {margin:0; padding:0} li {list-s Tyle:none} body {height:100%; color: #fff; font:14px/1.5 ' chunkfive Regular ', Arial, Helvetica, Sans-serif;} . mask {position:absolute; background: #000; width:100%; height:100%; left:0; top:0; z-index:999} #start {POSITION:ABSO lute; Color: #000; font-size:50px; top:45%; opacity:0; Filter:alpha (opacity=0)}. bg {position:absolute; Background:url (HTTP://IMAGES.CNBLogs.com/cnblogs_com/hongru/280894/o_bg-1.jpg) 50% 50%; left:0; height:100%; width:100%} #menu DL {padding:14px 8px 2px 8px} #menu {position:absolute; background: #000; font-size:30px; left:10 0px;top:120px; overflow:hidden;height:0; width:176px; z-index:1000} #menu dd {font-weight:bold; cursor:pointer height:44px;overflow:hidden; position:relative} #menu DD ul {position:absolute;left:0;top:0}. color-1 {color: #d61565}. color-2 {color: #555;} . info {position:absolute; width:300px; left:300px; top:120px;padding:14px 10px;background: #000; overflow:hidden; width:0;height:30px;display:none;z-index:1000}. fs-12 {font-size:12px} #waiting {left:46%; top:46%;font-size:40px; Color: #999;p osition:absolute} </style> </head> <body> <div id= "menu" > <dl> <dt>& lt;em> Zenghan--</em></dt> <dd><ul id= "menu0" > <li>home</li> <li class= "Color-1" ">home</li> </ul></dd> <dd> <ul ID= "Menu1" > <li>info</li> <li class= "color-1" >info</li> </ul> </dd> <dd> <ul id= "menu2" > <li>gallery</li> <li class= "color-1" >gallery</li> </ul> </dd& Gt <dd> <ul id= "Menu3" > <li>blog</li> <li class= "color-1" >blog</li> </ul> < /dd> <dd> <ul id= "Menu4" > <li>contact</li> <li class= "color-1" >contact</li> &L t;/ul> </dd> </dl> </div> <div id= "info0" class= "info" > <p class= "color-2" ><em> ; This is Hongru ' s space <span class= "color-1" >--home</span><br> @me: hongru.chenhr@gmail.com</em ></p> <strong class= "color-1" >welcome!</strong><br> <p class= "fs-12" >at vero EOS et a ccusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque cor rupti quos dolores et Quas molestias Excepturi siNT Occaecati cupiditate non provident.<br><br>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br> ut enim ad minim veniam, quis nostrud exe Rcitation Ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id= "Info1" class= "info "> <p class=" color-2 "><em>this are Hongru ' s space <span class=" color-1 ">--info</span><br > @me:hongru.chenhr@gmail.com</em></p> <strong class= "color-1" >welcome!</strong><br > <p class= "fs-12" >at vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium volupta Tum deleniti atque cor rupti quos Dolores et quas molestias Excepturi Sint Occaecati cupiditate non PROVIDENT.<BR>&L T;br>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag Na aliqua.<br><br> UtEnim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </d iv> <div id= "Info2" class= "info" > <p class= "color-2" ><em>this is Hongru ' s space <span class= "col Or-1 ">--gallery</span><br> @me:hongru.chenhr@gmail.com</em></p> <strong class=" Color-1 ">welcome!</strong><br> <p class=" fs-12 ">at vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque cor rupti quos dolores et quas molestias excepturi sint occae Cati cupiditate non provident.<br><br>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor incididunt ut labore et dolore magna aliqua.<br><br> ut enim ad minim veniam, quis nostrud exercitatio n Ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id= "Info3" class= "info" > & Lt;p class= "Color-2" ><em>tHis is Hongru ' s space <span class= "color-1" >--blog</span><br> @me: hongru.chenhr@gmail.com</em ></p> <strong class= "color-1" >welcome!</strong><br> <p class= "fs-12" >at vero EOS et a ccusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque cor rupti quos dolores et Quas Molestias Excepturi Sint Occaecati cupiditate non provident.<br><br>lorem ipsum dolor sit amet, consectet ur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br> ut enim ad min im veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> ;d IV id= "INFO4" class= "info" > <p class= "color-2" ><em>this is Hongru ' s space <span class= "Color-1" > --contact</span><br> @me:hongru.chenhr@gmail.com</em></p> <strong class= "Color-1" > Welcome!</strong><br> <pclass= "fs-12" >at vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti Cor rupti quos Dolores et quas molestias Excepturi Sint Occaecati cupiditate non provident.<br><br>lore atque M ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna t;br><br> ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi Ut aliquip ex ea Commodo conseq uat.</p> </div> <div id= "bg" class= "bg" > </div> <div id= "Mask" class= "Mask" ><strong I D= "Waiting" >Waiting...</strong></div> <em id= "Start" >Start!</em> <script type= "text/" JavaScript > onload = function () {hr.extend (HR, {addevent:function (O, E, f) {O.addeventlistener? o.addeventl Istener (E, F, false): O.attachevent (' on ' +e, function () {F.call (O)})}, $: function (ID) {return document.getElementById (ID)}, $$: Function (c, p) {return P.getelementsbytagname (c)}, Superanim: {}, Loadimg:function (URLs, CB) {var n = urls.length, img = [], f = 0; for (var i=0 i<n; i++) {Img[i] = new Image (); IMG[I].SRC = Urls[i]; if (img[i].complete) {if (++f = = N) {CB && CB (); return} else {f++}} img[i].onload = function () {if (++f = = N) {CB && CB ()} (else {f++}}}}) HR.superAnim.init = function () {var a = hr.$ (' mask '). Offsetwidth, B = hr.$ (' mask '). offsetheight, DLWP = hr.$ (' menu '), DD = hr.$$ (' dd ', DLWP), flag = null, clickable = true, at; Hr.get (' BG '). SetStyle (' top ',-b+ ' px '); Hr.loadimg ([' http://images.cnblogs.com/cnblogs_com/hongru/280894/o_bg-1.jpg ', ' http://images.cnblogs.com/ Cnblogs_com/hongru/280894/o_bg-2.jpg ', ' http://images.cnblogs.com/cnblogs_com/hongru/280894/o_bg-3.jpg ', ' http:/ /images.cnblogs.com/cnblogs_com/hongru/280894/o_bg-4.jpg ', ' http://images.cnblogs.com/cnblogs_com/hongru/280894 /o_bg-5.jpg '], function () {Hr.get (' mask '). Animate ({left:-a}, 3000, function () {hr.$ (' waiting '). style.display = ' None '; Hr.get (' start '). Animate ({opacity:1, left:a/2.2}, ' elastic '). Animate ({opacity:0,left:a}, ' elastic ', ' Easein ', function () {hr.get (' bg '). Animate ({top:0}, ' Bounce ', Watts, function () {hr.get (' menu '). Animate ({height:286}, ' Back ', function () {settimeout (function () {Bganim (2)}, 2000); }) }) }) }); }); For (Var i=0. i<dd.length; i++) {hr.addevent (dd[i], ' mouseover ', function (i) {return function () {hr.get (' menu ' + i). Stop (). Animate ({top: -48}, ' Back ')}} (i)); Hr.addevent (Dd[i], ' mouseout ', function (i) {return function () {hr.get (' menu ' +i). Stop (). Animate ({top:0}, ' Back ', 500) } (i)); Hr.addevent (Dd[i], ' click ', function (i) {return function () {if (clickable) {clickable = False;//console.log (' yes ') if (flag = null) {hr.get (' info ' +i). Show (). Animate ({width:300}, ' back '). Animate ({height:360}, ' Elastic ', function () { clickable = True;flag = i;}) else if (flag!= i) {hr.get (' info ' +flag). Animate ({height:30}). Animate ({width:0},function () {this.style.display = ' none ' hr.get (' info ' +i). Show (). Animate ({width:300}, ' Back '). Animate ({height:360}, ' Elastic ', function () {clickable = True;flag = i;}); }); else return; }} (i)); function Bganim (i) {cleartimeout (at); Hr.get (' mask '). Animate ({left:0}, function () {hr.$ (' bg '). style.backgroundimage = ' url (http://images.cnblogs.com/ cnblogs_com/hongru/280894/o_bg-' +i+ '. jpg) '; }). Animate ({left:-a}); var n = i+1 = 6? 1:i+1; at = settimeout (function () {Bganim (n)}, 6000); } }(); } </script></body> </html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
