js效果 div跟隨鼠標移動

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="da">
    <div class="div"></div>
</div>
</body>
<script>
//1.找到跟隨鼠標移動的div
var div=document.querySelector('.div');
//2.div的鼠標移動事件,但因爲鼠標事件的要求是,鼠標在要操作的元素上。所以,我們用window來做
window.onmousemove=function(evt){
    //3.得到鼠標的當前座標
    //evt.client 鼠標在可視區中的座標
    //evt.clientX  鼠標的X軸座標
    //evt.cliebtY  鼠標的Y軸座標
    var x=evt.clientX;
    var y=evt.clientY;
    //5.擴展:設置鼠標在元素的中間
    //如果想要設置鼠標在元素的中間,那麼就是div的寬度的一半與高度的一半的交點,就是中心點
    //元素的寬度的屬性是div.offsetWidth
    //元素的高度的屬性是div.offsetHeight
    //那麼我們要考慮的是加還是減。
    //如果是加的話,那麼就是鼠標顯示在0,0座標,但實際的座標卻是100,100;就會向下,右
    //減的話,鼠標顯示在0,0座標,實際的座標在-100,-100,向上,左
    //所以是減
    x=x-div.offsetWidth/2;
    y=y-div.offsetHeight/2;
    //4.設置div的left,top,因爲div是設置了絕對定位,像這種移動的都需要設置定位
    //div的左上角點,就是鼠標的座標
    div.style.left=x+'px';
    div.style.top=y+'px';
}
</script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章