计算鼠标至元素中心的距离

最新推荐文章于 2022-07-30 17:54:49 发布

xiyan_yuan

最新推荐文章于 2022-07-30 17:54:49 发布

阅读量742

点赞数

分类专栏： js 监听事件文章标签： html 鼠标监听

本文链接：https://blog.csdn.net/xiyan_yuan/article/details/77800234

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

监听事件

1 篇文章 0 订阅

订阅专栏

首先将一个元素定位在当前页面的中心位置（自适应），然后用mousemove 去监听鼠标，实时计算鼠标当前位置到元素中心的距离。
html

<html>
<head></head>
<body>
<a id='text'></a>
<div id='center_box'></div>
</body>
</html>

css

#center_box{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

<script>
(function(){
    /*变量解析:
    txt 用来存储计算出的距离 */
    var txt,$a=$('#text');
    //计算函数
    function calculateDistance(moveX,moveY){
    //获取div 的中心点坐标
    var $divx=document.documentElement.clientWidth/2;
    var $divy=document.documentElement.clientHeight/2;
    //鼠标在div 右侧，计算出的值是负数，所以要用abs 绝对值来转成正数
    var newx=Math.abs($divx-moveX);
    var newy=Math.abs($divy-moveY);
    return newx>=newy?newx:newy;
    }
    //现在计算函数准备好了，我们来写最重要的一步，监听事件
    $(document).mousemove(function(event){
        var e=event || window.event;
        txt=calculateDistance(e.clientX,e.clientY);
        $a.text=txt;
    })
})()
//window 自执行函数，实时监听，
!function(){
    function divtop(){
        $('#center_box').css('margin-top',(document.documentElement.clientHeight-$div[0].clientHeight)/2);
    }
    divtop();
}(window)
</script>

xiyan_yuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算鼠标至元素中心的距离

首先将一个元素定位在当前页面的中心位置（自适应），然后用mousemove 去监听鼠标，实时计算鼠标当前位置到元素中心的距离。 html<html><head></head><body><a id='text'></a><div id='center_box'></div></body></html>css#center_box{ width:100px; height
复制链接

扫一扫

专栏目录