欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實現(xiàn)跟隨鼠標移動的圖片

 更新時間：2021年09月30日 10:41:49   作者：qq_39111074  
這篇文章主要為大家詳細介紹了javascript實現(xiàn)跟隨鼠標移動的圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)圖片跟隨鼠標移動的具體代碼，供大家參考，具體內容如下

實現(xiàn)思路

1、給 document 綁定 mousemove 事件，獲取鼠標的坐標：e.pageX ，e.pageY
2、將圖片設置成絕對定位：position: absolute;
3、獲取圖片元素對象，將鼠標的 x , y 坐標 分別賦值給圖片的 left ， top 值，為了時鼠標在圖片中間，可以減去圖片寬高的一半，讓圖片位置向上向左，注意：不要忘記加上單位 ‘px'

小知識：

e.clientX- - -獲取鼠標 x 軸坐標，相對于瀏覽器窗口可視區(qū)
e.clientY- - -獲取鼠標 Y 軸坐標，相對于瀏覽器窗口可視區(qū)
e.pageX- - -獲取鼠標 x 軸坐標，相對于文檔頁面
e.pageY- - -獲取鼠標 Y 軸坐標，相對于文檔頁面
e.screenX- - -獲取鼠標 x 軸坐標，相對于電腦屏幕
e.screenY- - -獲取鼠標 Y 軸坐標，相對于電腦屏幕

示例

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>獲取鼠標坐標</title>
    <style>
        img {
            /* width: 80px;
            height: 90px; */
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="images/斑.png" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.top = y - 40 + 'px';
            img.style.left = x - 48 + 'px';
        })
    </script>
</body>

</html>

頁面效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論