div跟隨鼠標事件(onmousemove)


div跟隨鼠標移動是依賴於鼠標移動事件(onmousemove),廢話不多說直接上代碼:

CSS:

<style>

#div1{

width:50px;

height:50px;

border-radius:25px;

background-color:rgba(0,0,0,0.5);

cursor:pointer;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%)

}

</style>

HTML:

<div id="div1"></div>

JS:

<script>

document.onmousemove = function(ev){

var oEvent=ev||event;

var oDiv=document.getElementById('div1');

oDiv.style.left=oEvent.clientX+'px';

oDiv.style.top=oEvent.clientY+'px';

}

</script>

以上三部分搞定div跟隨鼠標移動,非常簡單。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM