Home > Developer > JavaScript
The cainiao version code is as follows:
You can understand this code.
Copy codeThe Code is as follows:
Function f_s (){
Var obj = document. getElementById ("top ");
Obj. style. display = "block ";
Obj. style. height = "1px ";
Var sw = function (){
Var s_width = parseInt (obj. style. height );
If (s_width <350 ){
Obj. style. height = (s_width + Math. ceil (350-s_width)/15) + "px ";
}
Else {
ClearInterval (st );
}
}
Var st = window. setInterval (sw, 1 );
}
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <meta name =" author "content =" Stri "/> <title> Buffer Effect </title> <style type =" text/css "> * {padding: 0px; margin: 0px ;}# top {width: 80px; height: 350px; float: left; background-color: #090; display: none; color: # fff; text-align: right; border: 1px solid #000; s} # top0 {width: 80px; float: right; height: 350px; background-color: #090; display: none; color: # fff; text-align: right; border: 1px solid #000; s} </style> <link href = "cssStyle/style_character common.css" rel = "stylesheet" type = "text/css"/> </pead> <body> enable the buffer effect. This is close a process from fast to slow <br> open a process from slow to fast </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Intermediate version
Copy codeThe Code is as follows:
/*
Function Name: Scroll
Scroll (obj, h, s)
Parameter description:
Obj, [object] id value or object. Required
H, [height] the expanded height. Optional (200px by default)
S, [speed] expansion speed. The smaller the value, the slower the expansion speed. Optional (default: 1.2) {recommended value range: 1.1 to 2.0 [Example: 1.17]}.
Function return value:
True expand (the object height equals the expanded height)
False (the object height equals the original height)
*/
Function Scroll (obj, h, s ){
If (obj = undefined) {return false ;}
Var h = h | 200;
Var s = s | 1.2;
Var obj = typeof (obj) = "string "? Document. getElementById (obj): obj;
Var status = obj. getAttribute ("status") = null;
Var oh = parseInt (obj. offsetHeight );
Obj. style. height = oh;
Obj. style. display = "block ";
Obj. style. overflow = "hidden ";
If (obj. getAttribute ("oldHeight") = null ){
Obj. setAttribute ("oldHeight", oh );
} Else {
Var oldH = Math. ceil (obj. getAttribute ("oldHeight "));
}
Var reSet = function (){
If (status ){
If (oh
Oh = Math. ceil (h-oh)/s );
Obj. style. height = oh + "px ";
} Else {
Obj. setAttribute ("status", false );
Window. clearInterval (IntervalId );
}
} Else {
Obj. style. height = oldH + "px ";
Obj. removeAttribute ("status ");
Window. clearInterval (IntervalId );
}
}
Var IntervalId = window. setInterval (reSet, 10 );
Return status;
}
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh-CN" lang = "zh-CN"> <pead> <title> layer expand/Close-motion Buffer Effect </title> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "> <meta name =" keywords "content =" Xiao Qin, expand, close, motion buffer, effect, javascript, encapsulation "/> <meta name =" description "content =" Expand/Close-motion Buffering Effect "/> <meta name =" copyright "content =" Copyright 2008 XQin.cn "/> <meta name =" author "content =" "/> </pead> <body> <p id = "detail" style = "border: 1px dashed # f00; "> This is a paragraph !! Wow, haha, click my workshop. </p> Hello World! Do you dare to click "I do not-_ | <button onclick =" Scroll ('text', 400, 1.2) "> Hello World </button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Advanced version
This is comprehensive, but I did not understand it .--!!
Http://www.cnblogs.com/cloudgamer/
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> Tween </title> </pead> <body> <p> Tween type: <br> <label> <input name = "vTween" type = "radio" value = "Linear" checked = "checked"/> Linear </label> <input name = "vTween" type = "radio" value = "Quad"/> Quadratic </label> <input name = "vTween" type = "radio" value =" cubic "/> Cubic </label> <input name =" vTween "type =" radio "value =" Quart "/> Quartic </label> <input name = "vTween" type = "radio" value = "Quint"/> Quintic </label> <input name = "vTween" type = "radio" value = "Sine"/> Sinusoidal </label> <br> <label> <input name = "vTween" type = "radio" value = "Expo"/> Exponential </label> <label> <input name = "vTween" type = "radio" value = "Circ"/> Circular </label> <input name = "vTween" type =" radio "value =" Elastic "/> Elastic </label> <input name =" vTween "type =" radio "value =" Back "/> Back </label> <label> <input name = "vTween" type = "radio" value = "Bounce"/> Bounce </label> </p> <p> Condition type: <br> <label> <input name = "vEase" type = "radio" value = "easeIn" checked = "checked"/> easeIn </label> <input name = "vEase" type = "radio" value = "easeOut"/> easeOut </label> <input name = "vEase" type = "radio" value =" easeInOut "/> easeInOut </label> </p> <input id =" idSpeed "type =" button "value =" slow down "/> <input id =" idRun" type = "button" value = "Run"/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Package download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
