Example analysis of toggle effect of JavaScript implementation Div

This article illustrates the toggle effect of JavaScript implementation Div. Share to everyone for your reference. The specific analysis is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90

<script type= "Text/javascript" language= "JavaScript" > function $ (obj) {return document.getElementById (obj);} function Togglediv () {this. Toggleid= ' Silder '; The object ID to be scaled this. Parentid= ' container '; The parent ID this.minheight=1 of the scaled object; Minimum height this.maxheight=200; Maximum height this.speed=1; Telescopic speed this.offset=0.15; Offset This.load=function () {if (this. Toggleid). style.display== ' None '//If it is hidden, open {starttoggle (' open ', this. Toggleid,this. Parentid,this.minheight,this.maxheight,this.speed,this.offset); else//If it is open, hide {starttoggle (' close '), this. Toggleid,this. Parentid,this.minheight,this.maxheight,this.speed,this.offset); }} function Starttoggle (method,toggleid,parentid,minheight,maxheight,speed,offset) {if typeof (method)!= ' String ' | | Method.tolowercase () = = ') {method= ' open ';} if (method.tolowercase () = = ' Open ') {var addspeed=speed+offset; var openfun= function () {var originheight=$ (Toggleid). offsetheight==0?1:$ (Toggleid). offsetheight; var newheight=originheight+ Addspeed; Addspeed=addspeed+ofFset if (parseint (newheight) <parseint (MaxHeight)) {$ (Toggleid). style.height=newheight+ ' px '; $ (Toggleid). style.display= ' block '; else if (parseint (newheight) >=parseint (MaxHeight)) {$ (Toggleid). style.height=maxheight+ ' px '; $ (Toggleid). style.display= ' block '; $ (parentid). innerhtml= ' contraction '; Window.clearinterval (AddTimer); } var addtimer=window.setinterval (openfun,100); else if (method.tolowercase () = = ' close ') {var addspeed=speed+offset; var reducefunction=function () {var originheight=$ (Toggleid). offsetheight; var newheight=originheight-addspeed; Addspeed=addspeed+offset; if (parseint (newheight) >parseint (MinHeight)) {$ (Toggleid). style.height=newheight+ ' px '; $ (Toggleid). style.display= ' block '; else {$ (toggleid). style.display= ' None '; $ (toggleid). style.height= ' 1px '; $ (parentid). innerhtml= ' unfold '; Window.clearinterval (Reducetimer); } var reducetimer=window.setinterval (reducefunction,100); } function Dotoggle (obj1,obj2) {var tog=new togglediv (); tog. Toggleid=obj1; Tog. Parentid=obj2; tog.minheight=5; tog.maxheight=110; tog.speed=10; tog.offset=3; Tog.load (); } </script>

Examples of usage are as follows:

1 2 3 4 5 6 7 8 9 10

<div style= "border:1px dashed blue;width:200px;" > <H2 id= "container" onclick= javascript:dotoggle (' Silder ', this.id); "Onmouseover=" this.style.cursor= " Pointer '; ' > Expand

Some of the stuff in the code is superfluous or repetitive. Would like to streamline a single, but a thought, the idea of the line.

Here are some of the lessons from this exercise:

1. The offsetheight value of the Read object will be different when style.display= ' none ' and style.visibility= ' hidden '.
Style.display= ' None ' read out, will be 0, and style.visibility= ' hidden ' when reading the object loading offsetheight, such as 108.

2, the value of style.height is not integral or number type, do not forget it is a unit oh: "108px" instead of "108", and offsetheight value is 108.

3, settimeout and SetInterval

There are two ways to use them, taking settimeout as an example:

Method One: settimeout (Function,interval,args) parameter one is the function name or the anonymous function, the parameter 2 is the time interval, the parameter 3 to n is the parameter of the function called, the following example:

settimeout (function () {alert (' 1 ');},1000) settimeout (getstr,1000, ' Mcjeremy ')

Method Two: settimeout (object,function,interval) parameter one is the object called, Parameter 2 is the method in the object, and Parameter 3 is the time interval.

There's an interesting stuff:

1 2 3 4 5

function A () {settimeout (function () {alert (' 1 ');},0); alert (' 2 ');}

Guess what the output turns out to be?

Answer: 21, not 12 oh. This is because the JS function executes as well as other programming languages with stacks. Alert (' 1 '), because there is settimeout, so the last execution ... I don't know if I understand this right.

Finish the work!