Javascript----实现鼠标背景效果（同时不影响其操作）

最新推荐文章于 2024-06-14 11:01:38 发布

weixin_33847182

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量113

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SunlikeLWL/p/7307325.html

版权

1、效果

2、代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标背景实现</title>
    <style type="text/css">
    #d {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: red;
        pointer-events: none;
    }
    </style>
</head>
<body>
    <div id='d'></div>
    <div>
        <div>
            <a href="http://www.baidu.com">baidu</a>
        </div>
    </div>
    <script type="text/javascript">
    var d = document.getElementById("d");
    console.log(d);
    function mousePosition(ev) {
        if (ev.pageX || ev.pageY) {
            return { x: ev.pageX, y: ev.pageY };
        }
        return {
            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,//padding
            y: ev.clientY + document.body.scrollTop - document.body.clientTop//padding
        };
    }
    document.onmousemove = function(ev) {
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        var style = "transform:translate(" + (mousePos.x - 20) + "px," + (mousePos.y - 20) + "px)";
        d.style = style;
        console.log(style);
    }
    </script>
</body>
</html>

　　3、总结：

a、pointer-events: none; //给元素解除所有事件的可能性。

转载于:https://www.cnblogs.com/SunlikeLWL/p/7307325.html

weixin_33847182

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript----实现鼠标背景效果（同时不影响其操作）

1、效果2、代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>鼠标背景实现</title> <style type="text/css"> #d { widt...
复制链接

扫一扫