【js】鼠标跟随效果

最新推荐文章于 2024-06-03 13:46:57 发布

weixin_33758863

最新推荐文章于 2024-06-03 13:46:57 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/websmile/p/8807691.html

版权

1.实现思想

①鼠标跟随效果，发生在鼠标移动的时候，故需要使用onmousemove事件
②当页面内容多于1屏时，就需要考虑滚动距离的问题
③想实现鼠标跟随的效果需要：
    元素的left位置 = 鼠标当前的x坐标值 + 水平方向的滚动距离
    元素的top位置 = 鼠标当前的y坐标值+垂直方向的滚动距离
④元素要为定位元素

2.demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>鼠标跟随效果</title>
        <style>
            body {
                margin: 0;
                padding: 0
            }
            
            #to_top {
                width: 30px;
                height: 40px;
                padding: 20px;
                font: 14px/20px arial;
                text-align: center;
                background: #06c;
                position: absolute;
                cursor: pointer;
                color: #fff
            }
        </style>
        <script>
            window.onload = function() {
                var oTop = document.getElementById("to_top");
                document.onmousemove = function(event) {
                    var oEvent = event || window.event;
                    var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                    oTop.style.left = oEvent.clientX + scrollleft + 10 + "px";
                    oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
                }
            }
        </script>
    </head>

    <body style="height:1000px;">
        <a href="#">文字</a>
        <div id="to_top">鼠标跟随</div>
    </body>

</html>

3.如果计算距离时不加滚动距离的效果：

滚动条没有滚动时的效果：

滚动条滚动到底部的效果：

作者：smile.轉角

QQ：493177502

转载于:https://www.cnblogs.com/websmile/p/8807691.html

weixin_33758863

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【js】鼠标跟随效果

1.实现思想①鼠标跟随效果，发生在鼠标移动的时候，故需要使用onmousemove事件②当页面内容多于1屏时，就需要考虑滚动距离的问题③想实现鼠标跟随的效果需要：元素的left位置 = 鼠标当前的x坐标值 + 水平方向的滚动距离元素的top位置 = 鼠标当前的y坐标值+垂直方向的滚动距离④元素要为定位元素2.demo<!DOCTYP...
复制链接

扫一扫