JavaScript buffering effect Implementation code recommendation

JavaScript buffering effect Implementation code recommendation _javascript Tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags abs asin cos pow sin ichart

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The rookie version of the code is as follows:
Understanding this code is basically a master

Copy Code code as follows:

Intermediate version

Copy Code code as follows:

/*
Function Name: Scroll
Scroll (obj, h, s)
Parameter description:
Obj,[object] ID value or object. Necessary
H,[height] The height after the expansion. Optional (default is 200px)
S,[speed] Expansion speed, the smaller the value of the expansion of the slower. Optional (default 1.2) {The recommended value is between 1.1 and 2.0 [for example: 1.17]}.
function return value:
True expand (the height of the object equals the height of the expansion)
False close (the height of the object 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 < h) {
Oh = Math.ceil (h (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" > < HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "ZH-CN" lang= "ZH-CN" > <pead> <title> Layer Expansion/shutdown-motion buffering effect </title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <meta name=" keywords "content=" little Qin, unfolding, closing, motion buffering, effects, JavaScript, encapsulation "/> <meta" Description "content=" expand/close-motion buffering effect "/> <meta name=" copyright "content=" Copyright 2008 xqin.cn "/> <meta na Me= "Author" content= "Xiao Qin"/> <script type= "Text/javascript" >/* Function name: Scroll Scroll (obj, h, s) parameter description: Obj,[ob Ject] ID value or object. Required H,[height] The height after the expansion. Optional (default 200px) s,[speed] Expand Speed, the smaller the value the slower the expansion speed. Optional (default 1.2) {The recommended value is between 1.1 and 2.0 [for example: 1.17]}. function return Value: True expands (the height of the object equals the height of the expansion) false closes (the height of the object 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 < h) {oh = Math.ceil (h (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; window.onload= function () {document.getElementById (' detail '). onclick = function () {Scroll (' detail ', 300, 1.3); } document.getElementById (' text '). onclick = function () {Scroll (' text '); } </script> </pead> <body> <p id= "Detail" > this is a paragraph!! Whoa hahaha dot me next: &LT;/P&GT <div id= "text" >hello world! You dare to point I do not-_| | | </div> <button onclick= "Scroll (' text ', 1.2)" >hello world</button> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Advanced version
This is full, but I don't understand.--!!
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> <div > <div > <div Id= "Idmove" ></div> </div> <div > <div id= "Idchart" > </div> <div id= "Idline" > </div> </div> </div> <div> <p> Tween type: <br> <label> <input name= "Vtwee N "type=" Radio "value=" Linear "checked=" checked "/> Linear </label> <label> <input name=" Vtween "type = "Radio" value= "Quad"/> Quadratic </label> <label> <input name= "Vtween" type= "Radio" value= "Cubic"/ > Cubic </label> <label> <input name= "Vtween" type= "Radio" value= "quart"/> quartic </label&gt ; <label><input name= "Vtween" type= "Radio" value= "Quint"/> quintic </label> <label> <input name= "Vtween" t Ype= "Radio" value= "Sine"/> sinusoidal </label> <br> <label> <input name= "Vtween" type= "Radio" Value= "Expo"/> exponential </label> <label> <input name= "Vtween" type= "Radio" value= "Circ"/> C Ircular </label> <label> <input name= "Vtween" type= "Radio" value= "elastic"/> Elastic </label> <label> <input name= "Vtween" type= "Radio" value= "Back"/> back </label> <label> <input nam E= "Vtween" type= "Radio" value= "Bounce"/> Bounce </label> </p> <p> Ease type: <br> &LT;LABEL&G T <input name= "Vease" type= "Radio" value= "Easein" checked= "checked"/> Easein </label> <label> <inpu T name= "Vease" type= "Radio" value= "Easeout"/> easeout </label> <label> <input name= "vease" Type= "rad Io "value=" easeinout"/> easeinout </label> </p> <input id=" idspeed "type=" button "value=" Slow down the speed,/> <input id= "Idru" N "type=" button "value=" Run "/> </div> <script>/* Algorithm Source: http://www.robertpenner.com/easing/* * var Tween = {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 $ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; }; var each = function (list, fun) {for (var i = 0, len = list.length i < len; i++) {Fun (list[i], i);} }; var fun, Ichart = iduration = 100; function Move () {var OM = $ ("IdmovE "). Style, OL = $ (" Idline "). Style, t=0, c=500, d=iduration; om.left=ol.left= "0px"; Cleartimeout (move._t); function _run () {if (t<d) {t++; Om.left = Math.ceil (Fun (t,0,c,d)) + "px"; Ol.left = Math.ceil (Tween.linear (t,0,ichart,d)) + "px"; move._t = settimeout (_run, 10); }else{Om.left = c + "px"; Ol.left = Ichart + "px"; } _run (); }////////////////////////////////////////////////////////function Chart () {var a = []; for (var i = 0; i < Ichart i++) {A.push (' <div + (i-1) + ' px;top: ' + (Math.ceil (Fun (I,200,-200,ichart))) + ' px; ' ><\/div> '); } $ ("Idchart"). InnerHTML = A.join (""); }////////////////////////////////////////////////////////var arrtween = document.getelementsbyname ("VTween"); var arrease = document.getelementsbyname ("Vease"); Each (Arrtween, function (o) {O.onclick = function () {setfun (); Chart(); Each (arrease, function (o) {O.onclick = function () {setfun ()); Chart (); }) function Setfun () {var stween, sease; Each (Arrtween, function (o) {if (o.checked) {stween = O.value;}}) Each (arrease, function (o) {if (o.checked) {sease = O.value;}}) Fun = Stween = = "Linear"? Tween.linear:tween[stween][sease]; } $ ("Idrun"). onclick = function () {setfun (); Chart (); Move (); } $ ("Idspeed"). onclick = function () {if (iduration = =) {iduration = +; this.value = "Speed up"; }else{iduration = This.value = "Slow down speed"; }} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Package download

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript buffering effect Implementation code recommendation _javascript Tips

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

JavaScript buffering effect Implementation code recommendation _javascript Tips

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support