Home > Developer > Web Develop
Original address: http://www.softwhy.com/forum.php?mod=viewthread&tid=12246
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title> Side bar Expansion Shrinkage</title><styletype= "Text/css">#thediv{width:150px;Height:200px;background:#999999;position:Absolute; Left:-150px; //div initial position }span{width:20px;Height:100px;Line-height:23px;background:#09C;position:Absolute; Right:-20px;Top:70px;}</style><Script>window.onload=function(){ varOdiv=document.getElementById ('Thediv'); Odiv.onmouseover=function() {Startmove (0,Ten);} Odiv.onmouseout=function() {Startmove (- Max,-Ten);}}varTimer=NULL;functionStartmove (target,speed) {varOdiv=document.getElementById ('Thediv'); Clearinterval (timer); Timer=SetInterval (function (){ if(Odiv.offsetleft==target) {clearinterval (timer); } Else{odiv.style.left=Odiv.offsetleft+ Speed+'px'; } }, -)}</Script></Head><Body><DivID= "Thediv"><span> Side bar Expansion Shrinkage</span></Div></Body></HTML>
The above code to achieve our requirements, the mouse hover in the sidebar can be implemented to expand, leaving the implementation of the contraction function, the following describes the implementation process.
A. Code Comment:
1.window.onload=function () {}, the contents of the document structure are fully loaded before executing the code in the function.
2.var Odiv=document.getelementbyid (' Thediv '), gets the specified element object.
3.odiv.onmouseover=function () {startmove (0,10);}, register the onmouseover event handler for the Odiv object.
4.odiv.onmouseout=function () {startmove ( -150,-10);}, register the onmouseout event handler for the Odiv object.
5.var Timer=null, declares a timer as the identifier of the timer function.
6.function Startmove (target,speed) {} This function is the core function of expansion and collapse, the first parameter is the left target value, speed is the velocity.
7. Var odiv=document.getelementbyid (' Thediv '), gets the element object.
8.clearInterval (timer), stop the previous timer function execution, can prevent the simultaneous execution of multiple timer functions cause interference.
9.timer=setinterval (function () {},30), which executes functions every 30 milliseconds.
10.if (odiv.offsetleft==target) {clearinterval (timer)}, stop the timer function if the div element is equal to the specified size from the left edge of the body.
11.else{odiv.style.left=odiv.offsetleft+speed+ ' px ';}, or continue setting the Left property value.
two. Related reading:
The 1.onmouseover event can be found in the onMouseOver event section of JavaScript .
The 2.onmouseout event can be found in the JavaScript onmouseout event section.
the 3.clearInterval () function can be found in the Clearinterval () Method section of the Window object .
The 4.setInterval () function can be found in the setinterval () Function usage section.
5.offsetLeft attributes can be found in the offsettop Good offsetleft attribute usage section of JS .
JS implementation of side bar expansion shrinkage effect
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
