js仿植物大戰殭屍的豌豆射手
阿新 • • 發佈：2018-12-28
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 100px; height: 100px; position: absolute; cursor: pointer; } /*div{ width: 100px; height: 100px; background: red; position: absolute; }*/ p{ width: 30px; height: 30px; background: green; border-radius: 50%; position: absolute; } </style> </head> <body> <div></div> <img src="aa.jpg" /> </body> <script type="text/javascript"> var odiv = document.getElementsByTagName("img")[0]; function aa(){ var p = document.createElement("p"); document.body.appendChild(p); p.style.left = odiv.offsetLeft+odiv.offsetWidth+"px"; p.style.top = odiv.offsetTop+p.offsetHeight/2+"px"; var count = odiv.offsetLeft+odiv.offsetWidth; var timer1 = setInterval(function(){ count++; p.style.left=count+"px"; if (parseInt(p.style.left)>1000) { p.style.display="none"; clearInterval(timer1); } },1); } setInterval(aa,1000); odiv.onmousedown=function(e){ var evt = e||window.event; // var xx = evt.clientX-odiv.offsetLeft; // var yy = evt.clientY-odiv.offsetTop; var xx= evt.offsetX; var yy = evt.offsetY; document.onmousemove=function(e){ var evt = e||window.event; var x = evt.clientX-xx; var y =evt.clientY-yy; odiv.style.left = x+"px"; odiv.style.top = y+"px"; return false; } document.onmouseup=function(){ document.onmousemove = null; document.onmouseup = null; } } </script> </html>
