案例：鼠标精灵跟随效果

最新推荐文章于 2023-06-02 17:44:04 发布

东方求败、

最新推荐文章于 2023-06-02 17:44:04 发布

阅读量132

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： html css javascript

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120160909

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 0 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

案例：鼠标精灵跟随效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #div1{width: 274px; height: 336px;background: url(timg.gif) no-repeat;position: absolute;}
        body{background-color: black;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            document.onmousemove = function(ev){
                var e = ev || window.event;
                oDiv.style.left = e.clientX - 50 + 'px';
                oDiv.style.top = e.clientY - 100 + 'px';
            }
        }
    </script>
</head>
<body>
    <div id = "div1"></div>
</body>
</html>

实现效果：
精灵跟随

相关知识：
事件类型的种类
 鼠标事件对象的属性

东方求败、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
案例：鼠标精灵跟随效果

案例：鼠标精灵跟随效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
复制链接

扫一扫