js效果 div跟随鼠标移动
生活随笔
收集整理的這篇文章主要介紹了
js效果 div跟随鼠标移动
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
js效果 div跟隨鼠標移動
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <style>*{margin: 0;padding: 0;} .div{width: 200px;height: 200px;background: red;position: absolute;cursor: pointer; } </style> <body><div class="div"></div> </div> </body> <script> //1.找到跟隨鼠標移動的div var div=document.querySelector('.div'); //2.div的鼠標移動事件，但因為鼠標事件的要求是，鼠標在要操作的元素上。所以，我們用window來做 window.onmousemove=function(evt){//3.得到鼠標的當前坐標//evt.client 鼠標在可視區(qū)中的坐標//evt.clientX 鼠標的X軸坐標//evt.cliebtY 鼠標的Y軸坐標var x=evt.clientX;var y=evt.clientY;//5.擴展：設(shè)置鼠標在元素的中間//如果想要設(shè)置鼠標在元素的中間，那么就是div的寬度的一半與高度的一半的交點，就是中心點//元素的寬度的屬性是div.offsetWidth//元素的高度的屬性是div.offsetHeight//那么我們要考慮的是加還是減。//如果是加的話，那么就是鼠標顯示在0，0坐標，但實際的坐標卻是100，100；就會向下，右//減的話，鼠標顯示在0，0坐標，實際的坐標在-100，-100，向上，左//所以是減x=x-div.offsetWidth/2;y=y-div.offsetHeight/2;//4.設(shè)置div的left，top，因為div是設(shè)置了絕對定位，像這種移動的都需要設(shè)置定位//div的左上角點，就是鼠標的坐標div.style.left=x+'px';div.style.top=y+'px'; } </script> </html>總結(jié)
以上是生活随笔為你收集整理的js效果 div跟随鼠标移动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaIDE介绍：Eclipse
- 下一篇： 物联网架构概述