HTML and CSS are written together for easy viewing, Div is set to 200 hidden by positioning, and span is positioned in the middle of the div by the left.
1 <!DOCTYPE HTML>2 <HTML>3 4 <Head>5 <MetaCharSet= "UTF-8">6 <title>Document</title>7 <styletype= "Text/css">8 * {9 margin:0;Ten padding:0; One font-size:12px; A } - - Div{ the width:200px; - Height:200px; - background:Green; - position:relative; + Left:-200px; - } + A span{ at width:30px; - Height:30px; - Line-height:30px; - background:Red; - position:Absolute; - Left:200px; in Top:85px; - text-align:Center; to cursor:Pointer; + } - </style> the </Head> * $ <Body>Panax Notoginseng <DivID= "Div"> - <spanID= "Show">Show</span> the </Div> + A the </Body> + - </HTML>
JS section is to add the timer to set the Offsetleft value of self-increment and self-subtraction, to achieve div display and hidden effects
1<script>2 function$ (ID) {3 return typeofid = = = "string"?document.getElementById (ID): ID;4 }5 6Window.onload =function() {7 //defines a hidden div for PTO8 varPTO = $ ("div");9 //defines a button span of btnTen varBTN = $ ("Show"); One //define an empty timer A varTimer =NULL; - - //button binds a mouse move event theBtn.onmouseenter =start; - - //custom functions are used to automatically increase - functionstart () { + //prevent self-acceleration, clear the timer before each start - clearinterval (timer); + //Define a timer ATimer = SetInterval (show, 30); at } - - //Custom function until the value of offsetleft is 0, otherwise the value of Offsetleft is increased from 2001 straight to 5 - functionShow () { - if(Pto.offsetleft = = 0) { - clearinterval (timer); in}Else { -Pto.style.left = pto.offsetleft + 5 + ' px '; to } + } - the //binding a mouse-out event *Btn.onmouseleave =Back ; $ Panax Notoginseng //custom functions for automatic reduction of - functionBack () { the clearinterval (timer); +Timer = setinterval (Clear, 30); A } the + //Custom function until the value of offsetleft is-200, otherwise the Offsetleft value has been self-reduced by 5 - functionClear () { $ if(Pto.offsetleft = =-200) { $ clearinterval (timer); -}Else { -Pto.style.left = pto.offsetleft-5 + ' px '; the } - }Wuyi the } -</script>
The uniform motion of JavaScript animation effect