js窗口边缘滑出初级代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js窗口边缘滑出初级代码相关的知识，希望对你有一定的参考价值。
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窗口边缘滑出初级代码的主要内容，如果未能解决你的问题，请参考以下文章
[AndroidStudio]_[初级]_[配置自动完成的代码片段]