首页 > 代码库 > js窗口边缘滑出初级代码

js窗口边缘滑出初级代码

2024-08-21 15:44:54   220人阅读

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>practice</title>
 6     <style type="text/css">
 7         *{margin:0px;padding:0px;}
 8         #div1 {position:relative;left:-200px;width:200px;height:200px;margin-top:50px;background-color: pink;}
 9         #share{background-color:lightblue;width:20px;height:50px;position: absolute;left:200px;top:75px;}
10     </style>
11     <script type="text/javascript">
12         window.onload=function(){
13             var div1=document.getElementById("div1");
14             div1.onmouseover=startMove;
15             /*不加括号,就是正常的,鼠标滑过,开始移动,表示鼠标滑过,调用这个函数*/        
16             /*div1.onmouseover=startMove();*/
17             /*加了括号之后,一打开就开始移动,表示,把函数执行的结果给div1的鼠标滑过事件,所以会去先执行函数,
18             因为函数执行的结果就是offsetLeft==0,然后把这个结果给div1的鼠标滑过事件,所以会出现一打开就跑,
19             这是为了得到函数执行的结果*/
20             div1.onmouseout=startMove1;            
21         };
22         var timer=[‘1‘];
23         /*必须要在外面定义,放在函数里面定义就失败了;
24         含义：timer函数外定义,在两个函数内同时调用,意为,当startMove1调用时,清楚startMove的timer,反之亦如此;
25         这样就不会同时运行两个timer,一个函数执行timer前,先清楚另一个timer,这样往前停止，再调用timer往后,
26         否则同时运行会出错；*/
27         function startMove(){
28             /*alert(timer.length);*/
29             clearInterval(timer);
30             timer=setInterval(
31                             function(){
32                                 if(div1.offsetLeft==0){clearInterval(timer)}//判断要计算,所以不能带‘px‘,用offsetLeft
33                                     else {/*alert(div1.style.left);*/
34                                     //offsetLeft显示无‘px‘,style.left显示有‘px‘
35                 /*疑问：alert里面这样用,第一次显示不出left值,后面才可以，为什么？
36                 换成offsetLeft第一次就可以显示出来*/    
37                                         div1.style.left=div1.offsetLeft+10+‘px‘;
38                                         //这个地方要+-,最好不带‘px‘
39                                         console.log(div1.offsetLeft);
40                                     }}    
41                                ,30);
42         }
43         function startMove1(){
44             clearInterval(timer);
45             timer=setInterval(
46                             function(){
47                                 if(div1.offsetLeft==-200){clearInterval(timer);}
48                                     else{div1.style.left=div1.offsetLeft-10+‘px‘;
49                                     console.log(div1.offsetLeft);}
50                             }
51                             ,30);
52         }
53     </script>
54 </head>
55 <body>
56 
57     <div id="div1">
58         <span id="share">分享</span>
59     </div>
60 </body>
61 </html>

 

js窗口边缘滑出初级代码


联系
我们