分享菜单效果
分享菜單效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分享菜單</title> 6 <style> 7 #div1{width: 100px; height: 200px; background-color: #ccc;position: absolute; left: -100px} 8 #div1 span{width: 20px; height: 60px; background-color: yellow; position: absolute; line-height: 20px; left: 100px;top: 70px} 9 </style> 10 <script> 11 window.onload = function(){ 12 var oDiv = document.getElementById("div1"); 13 oDiv.onmouseover = function(){ 14 //-100 > 0 15 startMove(); 16 } 17 18 oDiv.onmouseout = function(){ 19 //0 > -100 20 startMove2(); 21 } 22 } 23 24 var timer = null; 25 //使div出來的函數(shù) 26 function startMove(){ 27 var oDiv = document.getElementById("div1"); 28 clearInterval(timer); 29 var speed = 5; 30 timer = setInterval(function(){ 31 if(oDiv.offsetLeft == 0){ 32 clearInterval(timer); 33 }else{ 34 oDiv.style.left = oDiv.offsetLeft + speed + "px"; 35 } 36 }, 30); 37 } 38 //使div隱藏的函數(shù) 39 function startMove2(){ 40 var oDiv = document.getElementById("div1"); 41 clearInterval(timer); 42 var speed = -5; 43 timer = setInterval(function(){ 44 if(oDiv.offsetLeft == -100){ 45 clearInterval(timer); 46 }else{ 47 oDiv.style.left = oDiv.offsetLeft + speed + "px"; 48 } 49 }, 30); 50 } 51 </script> 52 </head> 53 <body> 54 <div id = "div1"> 55 <!-- span必須寫到要隱藏的里面，不然隱藏到里面后，鼠標(biāo)就沒有 56 辦法點(diǎn)到了,也就沒辦法出來了，讓span相對于div定位定出來， 57 然后，鼠標(biāo)移到span上的時(shí)候，因?yàn)槭录芭莸拇嬖?#xff0c;也就相當(dāng)于 58 移動(dòng)了div上。 59 --> 60 <span>分享到</span> 61 </div> 62 </body> 63 </html>瀏覽器效果：
上面的兩個(gè)startMove函數(shù)大部分都是相同的，加形參加以簡化。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分享菜單_簡化</title> 6 <style> 7 #div1{width: 100px; height: 200px; background-color: #ccc;position: absolute; left: -100px} 8 #div1 span{width: 20px; height: 60px; background-color: yellow; position: absolute; line-height: 20px; left: 100px;top: 70px} 9 </style> 10 <script> 11 window.onload = function(){ 12 var oDiv = document.getElementById("div1"); 13 oDiv.onmouseover = function(){ 14 //-100 > 0 15 startMove(5, 0); 16 } 17 18 oDiv.onmouseout = function(){ 19 //0 > -100 20 startMove(-5, -100); 21 } 22 } 23 24 25 //兩個(gè)合二為一 26 var timer = null; 27 function startMove(speed, iTarget){ 28 var oDiv = document.getElementById("div1"); 29 clearInterval(timer); 30 timer = setInterval(function(){ 31 if(oDiv.offsetLeft == iTarget){ 32 clearInterval(timer); 33 }else{ 34 oDiv.style.left = oDiv.offsetLeft + speed + "px"; 35 } 36 }, 30); 37 } 38 39 40 </script> 41 </head> 42 <body> 43 <div id = "div1"> 44 <span>分享到</span> 45 </div> 46 </body> 47 </html>形參能用一個(gè)就不用倆，再加以簡化：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分享菜單_究極版</title> 6 <style> 7 #div1{width: 100px; height: 200px; background-color: #ccc;position: absolute; left: -100px} 8 #div1 span{width: 20px; height: 60px; background-color: yellow; position: absolute; line-height: 20px; left: 100px;top: 70px} 9 </style> 10 <script> 11 window.onload = function(){ 12 var oDiv = document.getElementById("div1"); 13 oDiv.onmouseover = function(){ 14 //-100 > 0 15 startMove(0); 16 } 17 18 oDiv.onmouseout = function(){ 19 //0 > -100 20 startMove(-100); 21 } 22 } 23 24 var timer = null; 25 function startMove(iTarget){ 26 var oDiv = document.getElementById("div1"); 27 var speed = null; 28 clearInterval(timer); 29 timer = setInterval(function(){ 30 //判斷速度的正負(fù) 31 if(oDiv.offsetLeft < iTarget){ 32 speed = 5; 33 }else{ 34 speed = -5; 35 } 36 if(oDiv.offsetLeft == iTarget){ 37 clearInterval(timer); 38 }else{ 39 oDiv.style.left = oDiv.offsetLeft + speed + "px"; 40 } 41 }, 30); 42 } 43 44 45 </script> 46 </head> 47 <body> 48 <div id = "div1"> 49 <span>分享到</span> 50 </div> 51 </body> 52 </html>?
效果都同上。
?
轉(zhuǎn)載于:https://www.cnblogs.com/taohuaya/p/9623740.html
總結(jié)
