分享菜单效果
分享菜单效果：
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出来的函数 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隐藏的函数 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必须写到要隐藏的里面，不然隐藏到里面后，鼠标就没有 56 办法点到了,也就没办法出来了，让span相对于div定位定出来， 57 然后，鼠标移到span上的时候，因为事件冒泡的存在，也就相当于 58 移动了div上。 59 --> 60 <span>分享到</span> 61 </div> 62 </body> 63 </html>
浏览器效果：
上面的两个startMove函数大部分都是相同的，加形参加以简化。
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 //两个合二为一 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>
形参能用一个就不用俩，再加以简化：
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 //判断速度的正负 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>
效果都同上。
