JS分享到功能实现

分享到就是鼠标移入慢慢弹出DIV，鼠标移出慢慢缩回DIV。

运动框架的大体思路：1、在开始运动之前关闭已有的定时器，这样是防止多个点击事件触发多个定时器产生的运动。2、把运动和停止分隔开if else

 

分享到代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 #div{position:absolute;top:174px;left:-150px;width:160px;height:200px;background:#ccc;}
 8 </style>
 9 <script>
10 window.onload=function()
11 {
12     var oDiv=document.getElementById('div');
13     var timer=null;
14     
15     oDiv.onmouseover=function()
16     {
17         startMove(0);
18     };
19     
20     oDiv.onmouseout=function()
21     {
22         startMove(-150);
23     };
24     
25     function startMove(iTarget)
26     {        
27         clearInterval(timer);
28         timer=setInterval(function(){
29             var speed=0;
30             if(oDiv.offsetLeft<iTarget){ //当前位置小于目标位置，要往目标位置去就要用正数，如果当前位置大于目标位置，要往目标位置去就要用负数。
31                 speed=10;
32             }
33             else{
34                 speed=-10;
35             }
36             
37             if(oDiv.offsetLeft==iTarget){
38                 clearInterval(timer);    
39             }
40             else{
41                 oDiv.style.left=oDiv.offsetLeft+speed+'px';    
42             }
43         },30);    
44     };
45     
46 };
47 </script>
48 </head>
49 
50 <body>
51 <div id="div">
52 </div>
53 </body>
54 </html>

 

posted @ 2013-03-08 11:50  yexingwen  阅读(430)  评论(0)  编辑  收藏  举报