js效果 div跟随鼠标移动
生活随笔
收集整理的這篇文章主要介紹了
js效果 div跟随鼠标移动
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
js效果 div跟隨鼠標(biāo)移動(dòng)
<!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.找到跟隨鼠標(biāo)移動(dòng)的div var div=document.querySelector('.div'); //2.div的鼠標(biāo)移動(dòng)事件，但因?yàn)槭髽?biāo)事件的要求是，鼠標(biāo)在要操作的元素上。所以，我們用window來做 window.onmousemove=function(evt){//3.得到鼠標(biāo)的當(dāng)前坐標(biāo)//evt.client 鼠標(biāo)在可視區(qū)中的坐標(biāo)//evt.clientX 鼠標(biāo)的X軸坐標(biāo)//evt.cliebtY 鼠標(biāo)的Y軸坐標(biāo)var x=evt.clientX;var y=evt.clientY;//5.擴(kuò)展：設(shè)置鼠標(biāo)在元素的中間//如果想要設(shè)置鼠標(biāo)在元素的中間，那么就是div的寬度的一半與高度的一半的交點(diǎn)，就是中心點(diǎn)//元素的寬度的屬性是div.offsetWidth//元素的高度的屬性是div.offsetHeight//那么我們要考慮的是加還是減。//如果是加的話，那么就是鼠標(biāo)顯示在0，0坐標(biāo)，但實(shí)際的坐標(biāo)卻是100，100；就會向下，右//減的話，鼠標(biāo)顯示在0，0坐標(biāo)，實(shí)際的坐標(biāo)在-100，-100，向上，左//所以是減x=x-div.offsetWidth/2;y=y-div.offsetHeight/2;//4.設(shè)置div的left，top，因?yàn)閐iv是設(shè)置了絕對定位，像這種移動(dòng)的都需要設(shè)置定位//div的左上角點(diǎn)，就是鼠標(biāo)的坐標(biāo)div.style.left=x+'px';div.style.top=y+'px'; } </script> </html>總結(jié)
以上是生活随笔為你收集整理的js效果 div跟随鼠标移动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaIDE介绍：Eclipse
- 下一篇： 物联网架构概述