前端實現器背景互動效果
阿新 • • 發佈:2018-11-10
簡單實現前端瀏覽器背景互動效果
不多說-直接上程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> </head> <body> // Mouse X Position: <input id="xxx" type="text" /> <br> // Mouse Y Position: <input id="yyy" type="text" /> <div data-v-4a3c9f12="" id="sss" class="ball-1" style="transform: translate(4.12131px, 7.35076px);position:absolute;left: 20px;bottom: 320px;border:1px solid #000;width:30px;height:30px;"> <img data-v-4a3c9f12="" src=""> </div> <script> function mouseMove(ev) { ev= ev || window.event; var mousePos = mouseCoords(ev); //alert(ev.pageX); document.getElementById('xxx').value = mousePos.x; document.getElementById('yyy').value = mousePos.y; document.getElementById('sss').style.setProperty("transform","translate("+mousePos.x/100+"px, "+mousePos.y/100+"px)"); // cssText setProperty } function mouseCoords(ev) { if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; </script> </body> </html>