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

javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片

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

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)思路

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

小知識(shí)：

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

示例

代碼示例：

<!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>獲取鼠標(biāo)坐標(biāo)</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>

頁面效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論