js滑鼠帶動div運動
阿新 • • 發佈:2018-12-06
滑鼠帶動一串div運動
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="mouse.js" type="text/javascript" charset="utf-8" async defer></script> <style type="text/css" media="screen"> div{ width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
js:
document.onmousemove=function (ev) { var oevent=ev||event; var odiv=document.getElementsByTagName('div'); var pos=getpos(oevent); for (var i = odiv.length - 1; i > 0; i--) { odiv[i].style.left = odiv[i-1].offsetLeft+'px'; odiv[i].style.top = odiv[i-1].offsetTop+'px'; } odiv[0].style.left =pos.x+'px'; odiv[0].style.top = pos.y+'px'; }; function getpos(ev){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop}; }
滑鼠事件:onmousemove
計算位置:scrollTop scrollLeft