躁动的小球

xiaoxiao2024-06-04 101

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } div{ width: 200px; height: 200px; background: blue; border-radius: 50%; position:fixed; } span{ width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50%; position: absolute; background:#ccc; margin-left: 50px; margin-top:50px; } </style> </head> <body> <div style="left:0;top:0"><span>X</span></div> </body> </html> <script>

var oDiv=document.getElementsByTagName('div')[0]; var ospan=document.getElementsByTagName("span")[0]; var i=1,j=1;var timer=setInterval(fn,30)function fn(){

oDiv.style.left=oDiv.offsetLeft+10*i+"px"; oDiv.style.top=oDiv.offsetTop+10*j+"px"; var ymWidth=document.documentElement.clientWidth||document.body.clientWidth; var ymHeight=document.documentElement.clientHeight||document.body.clientHeight; if (oDiv.offsetLeft>=ymWidth-200&&i>0||oDiv.offsetLeft<=0&&i<0) { i*=-1; } if (oDiv.offsetTop>=ymHeight-200&&j>0||oDiv.offsetTop<=0&&j<0) { j*=-1; }; } oDiv.onmouseover=function(){ clearInterval(timer) } oDiv.onmouseout=function(){ timer=setInterval(fn,30) } ospan.onclick=function(){ oDiv.style.display="none" } var timer2=setInterval(function(){ oDiv.style.display="block" },2000) </script> 相关资源：敏捷开发V1.0.pptx

最新回复(0)