Functional description of the slider class:
1, you can control the existence of any one page div
2, slider in the sliding while also can achieve transparency changes, the whole process more smooth, more beautiful
3, controllability strong, through a number of parameters to achieve different size div different direction, different speed of the sliding
4, easy to invoke, a sentence can be initialized, slider looming control more simple, see the code example
A description of the implementation process for the slider class:
The idea is that today's website often uses the so-called Web2.0 pattern of div looming effect, a previous section of their own on the Web page to achieve a successful attempt to encapsulate a class after the convenience of use, can also be open for everyone to use, just can also learn JavaScript class programming methods (Brothers have been using Microsoft's things, the Javas Cript not familiar), the process encountered a little problem, on the 51js posted a post for help, originally also did not report too much hope, the results were caudex and he1a2s0 two friends to explain and help, smooth solved the problem, once again to two to express my heartfelt thanks, Of course, by the way also want to thank the flyking this warrior's disdain and sarcasm, because this also gave me a great power.
Well, nonsense do not say, although my implementation method is certainly not the best, and even more primitive and clumsy, but after all, is realized, give out to everyone, have to see on the use of it. Or have a better way to teach, my email douwenming@gmail.com, welcome to contact.
<! 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> Untitled document </title> <STYLE> body {background-color: #EEEEEE; margin:0px; Text-align:center; } #wrap {width:736px; Background-color: #FFFFFF; Overflow:hidden; margin:12px; padding:12px; } #topcontainer {height:80px; width:732px; Background-color: #99FF66; border:1px solid #79F200; } #bodycontainer {height:400px; width:100%; margin-top:12px; } #bottomcontainer {height:60px; width:100%; margin-top:12px; } #topwrap {width:100%; } #leftcontainer {background-color: #99FF66; height:400px; width:120px; FlOat:left; border:1px solid #79F200; } input {background-color: #99FF66; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; Border-top-style:solid; Border-right-style:solid; Border-bottom-style:solid; Border-left-style:solid; Border-top-color: #79F200; Border-right-color: #79F200; Border-bottom-color: #79F200; Border-left-color: #79F200; line-height:28px; Background-position:center; height:30px; } </STYLE> </pead> <body> <div id= "wrap" > <div align= "left" > <input t Ype= "button" id= "Showtop" onclick= "topslider.show () this.style.display= ' None ';d ocument.getelementbyid (' Hidetop ') . style.display= '; "value=" expand Top "/> <input type=" button "id=" Hidetop "value=" Close Top "onclick=" topslider.hide (); t His.style.display= ' None ';d ocument.getelementbyid (' Showtop '). style.display= ';/> </div> <div id= "Topwrap" > <div id= "topcontainer" ></div> </div> <div id= "Bodycontainer "> <div id=" Leftcontainer "> </div> <div align=" left "> & Lt;input type= "button" id= "Showleft" value= "expand Left" onclick= "leftslider.show (); this.style.display= ' None '; document.getElementById (' Hideleft '). style.display= '; /> <input type= "button" id= "Hideleft" "value=" closes left "onclick=" Leftslider.hide () this.style.display= ' None ';d ocum Ent.getelementbyid (' Showleft '). style.display= '; "/> </div> </div> <div id=" Bottomcontainer "& gt;</div> </div> <script language= "JavaScript" type= "Text/javascript" > slider.names = new Array (); function slider () {this.id = Slider.names.length; Slider.names[this.id] = this; This.target = document.getElementById (Arguments[0]); First parameter: The id this.direction = arguments[1];//The second parameter of the manipulated Div: the direction of the Div popup This.height = arguments[2];//third parameter: div height this.width = arguments[3];//Fourth parameter: div width this.step = arguments[4];// Five parameters: want the action to decompose into several steps complete This.timer = ten * arguments[5];//sixth parameter: Interval time for each action, 10ms for one unit This.startopa = arguments[6];//Seventh parameter : div start Transparency this.sparent = this.target.parentnode;//Get operation Div's parent container this.intervalid = null;//loop timed id this.i = 0; Loop counter this.status = 0;//slider Layer State: 0-can expand 1-can not expand This.target.style.display = "none"; is; } slider.prototype.initialize = function () {This.sparent.style.overflow = "hidden";//Set parent container overflow This.targ Et.style.width = Number (this.width) + ' px ';/set the width of the target div this.target.style.height = number (this.height) + ' px ';/Set Target D The height of IV this.target.style.position = ""//Set the target div's positioning mode this.target.style.display = "";//Set the target div display mode This.tar Get.style.filter = ' Alpha (opacity= ' + number (This.startopa) + ') ';//Set the transparency of the target div to the initial transparency This.target.style.overflow = "H Idden ";/Set Overflow Switch (this.direction)//According to the pop-up direction set div margin {case 1://left to right This.target.style.mar Ginleft = "-" + this.width + "px"; Break Case 2://top to bottom this.target.style.marginTop = "-" + this.height + "px"; Break Case 3://right to left this.target.style.marginRight = "-" + this.width + "px"; Break } slider.prototype.show = function () {if (this.status==0)/Check whether the state has been expanded {this.initialize ();//Operation di V and its parent container initialization this.intervalid = Window.setinterval ("slider.names[" +this.id+ "].cycle ()", this.timer);/Set Action loop } slider.prototype.hide = function () {if (this.status==1)/Check whether the state is already expanded {this.intervalid = Window.setinterval ("slider.names[" +this.id+ "].decycle ()", this.timer);//Set Action loop}} SLIDER.PROTOTYPE.CYCL E = function ()//Single Step loop action {var OPA = this.target.style.filter.split ("=") [1].SPLIt (")") [0]//Gets the transparency value of the target div var opastep = Math.Round (((100-number (OPA)/this.step) +2.5);//calculate the transparency increment per step var n OPA = number (OPA) + number (opastep);//Current transparency if (nopa>100) {this.target.style.filter = ' Alpha (opacity=100) ';} Else{this.target.style.filter = ' Alpha (opacity= ' + String (nopa) + ') ';} Assign a div transparency Assignment switch (this.direction)//To calculate and set the div action in the pop-up direction {Case 1://left to right Var OPX = This.target.style.marginLeft.split ("px") [0]; var pxstep = Math.Round ((this.width/this.step) +0.5); var npx = number (OPX) + number (pxstep); if (npx>0) {this.target.style.marginLeft = ' 0px ';} Else{this.target.style.marginleft = String (npx) + ' px ';} Break Case 2://top to bottom var opx = this.target.style.marginTop.split ("px") [0]; var pxstep = Math.Round ((this.height/this.step) +0.5); var npx = number (OPX) + number (pxstep); if (npx>0){this.target.style.marginTop = ' 0px ';} Else{this.target.style.margintop = String (npx) + ' px ';} Break Case 3://right to left var opx = this.target.style.marginRight.split ("px") [0]; var pxstep = Math.Round ((this.width/this.step) +0.5); var npx = number (OPX) + number (pxstep); if (npx>0) {this.target.style.marginRight = ' 0px ';} Else{this.target.style.marginright = String (npx) + ' px ';} Break this.i++//Counter +1 if (this.i> (this.step-1)) {window.clearinterval (this.intervalid); This.i=0;this.status=1; }//loop complete, purge cycle timed} slider.prototype.decycle = function ()//Single Step loop action {var OPA = This.target.style.filter.split ("=") [1].split (")"] [0]//gets the transparency of the target div value var opastep = Math.Round (((100-number (OPA))/this.step) +2.5) *2;//calculates the increased transparency per step var Nopa = number (OPA)-Number (opastep);//Current transparency if (Nopa<this.startopa) {this.target.style.filter = ' Alpha (OPA City= ' + this.Startopa + ') ';} Else{this.target.style.filter = ' Alpha (opacity= ' + String (nopa) + ') ';} Assign the div transparency Assignment Switch (this.direction)//To calculate and set the div action in the pop-up direction {Case 1://left to right var opx = this.target.style.marginLeft.split ("px") [0]; var pxstep = Math.Round ((This.width/math.round (this.step*0.5)) +0.5); var npx = number (OPX)-Number (pxstep); if (Math.Abs (NPX) >this.width+2) {this.target.style.marginLeft = '-' + this.width + ' px ';} Else{this.target.style.marginleft = String (npx) + ' px ';} Break Case 2://top to bottom var opx = this.target.style.marginTop.split ("px") [0]; var pxstep = Math.Round ((This.height/math.round (this.step*0.5)) +0.5); var npx = number (OPX)-Number (pxstep); if (Math.Abs (NPX) >this.height+2) {this.target.style.marginTop = '-' + this.height + ' px ';} Else{this.target.style.margintop = String (npx) + ' px ';} Break Case 3://right to left var opx = this.target.style.marginRight.split ("px") [0]; var pxstep = Math.Round ((This.width/math.round (this.step*0.5)) +0.5); var npx = number (OPX)-Number (pxstep); if (Math.Abs (NPX) >this.width+2) {this.target.style.marginRight = '-' + this.width + ' px ';} Else{this.target.style.marginright = String (npx) + ' px ';} Break this.i++//Counter +1 if (this.i> (Math.Round (this.step*0.5)-1)) {window.clearinterval (this.intervalid); this.i= 0;this.status=0;this.target.style.display = "None";} Loop complete, clear cycle timing}//instructions on how to use this code:///The above code can be encapsulated into a separate JS file, then included in the page//and then use the following code for slider initialization, a page can use multiple slider, The following code must be at the bottom of the page </body> before, otherwise you may be able to error var Topslider = new Slider (' Topcontainer ', 2,80,734,20,2,20); var leftslider = new Slider (' Leftcontainer ', 1,398,120,20,1,20); The meaning of the parameters can be seen at the top of the Code//Control slider action can be used in two ways//one is called using the name of the following declaration, such as Topslider.show (), topslider.hide ()//AnotherSpecies can use Slider.names[0].show (), Slider.names[0].hide (), subscript depending on slider initialization order </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Description of the invocation of the slider class:
Instructions on how to use this code:
The above code can be encapsulated into a separate JS file and then included in the page
Then use the following code for slider initialization, a page can use multiple slider, the following code must be at the bottom of the page </body> before, or may be an error
var topslider = new Slider (' Topcontainer ', 2,80,734,20,2,20); var leftslider = new Slider (' Leftcontainer ', 1,398,120,20,1,20);
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The values of the arguments represent the meanings that can be seen at the top of the code
There are two ways to control slider actions
One is the invocation of the name declared at initialization time, such as Topslider.show (), Topslider.hide ()
Another can use Slider.names[0].show (), Slider.names[0].hide (), and the subscript depends on the order of slider initialization
