div跟随鼠标事件(onmousemove)
生活随笔
收集整理的這篇文章主要介紹了
div跟随鼠标事件(onmousemove)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
div跟隨鼠標(biāo)移動是依賴于鼠標(biāo)移動事件(onmousemove),廢話不多說直接上代碼:
CSS:
<style>
#div1{
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跟隨鼠標(biāo)移動,非常簡單。
總結(jié)
以上是生活随笔為你收集整理的div跟随鼠标事件(onmousemove)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: <!DOCTYPE html PU
- 下一篇: Bullet 学习笔记之 Collisi