zoukankan      html  css  js  c++  java
  • 【js】鼠标跟随效果

    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

  • 相关阅读:
    TrieTree的学习
    单调队列(monotonic queue)列与单调栈的学习
    507. Perfect Number
    157. Read N Characters Given Read4
    nsexec
    nsenter
    setjmp
    runc 测试
    cgo setns + libcontainer nsexec
    前端 导出为Excel 数据源为table表格 并且table中含有图片
  • 原文地址:https://www.cnblogs.com/websmile/p/8807691.html
Copyright © 2011-2022 走看看