js进阶 12-3 如何实现元素跟随鼠标移动

最新推荐文章于 2024-05-13 15:06:53 发布

weixin_33968104

最新推荐文章于 2024-05-13 15:06:53 发布

阅读量365

点赞数 2

文章标签： javascript ViewUI

js进阶 12-3 如何实现元素跟随鼠标移动

一、总结

一句话总结：获取鼠标位置，将鼠标位置设置为元素偏移即可。

1、用什么事件获取鼠标位置？

用mousemove可以获取鼠标移动的时候的位置

        $(document).mousemove(function(e){

2、mousemove的调用对象是谁？

想知道在哪个里面动，就调谁，这里是document

        $(document).mousemove(function(e){

3、如何获取鼠标的具体坐标？

event对象的pageX和pageY属性

        $(document).mousemove(function(e){
            //event.pageX/event.pageY鼠标相对于文档的坐标位置。
            var x=e.pageX+'px'; var y=e.pageY+'px'; $('#txt').val(x+' '+y)

4、动态测试变量的值用什么方法好？

将值动态的显示在标签中，就像示例一样。

二、如何实现元素跟随鼠标移动

1、相关知识

mousemove() 当鼠标指针在指定的元素中移动时触发。

2、代码

<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #div1{width: 100px;height: 100px;background: orange;border-radius: 50px;position: absolute;}
    </style>
</style>
</head>
<body>
    <div id="div1"></div>
    <p>鼠标坐标(mousemove):<input type="text" id="txt"></p>
    <script type="text/javascript">
        $(document).mousemove(function(e){
            //event.pageX/event.pageY鼠标相对于文档的坐标位置。
            var x=e.pageX+'px';
            var y=e.pageY+'px';
            $('#txt').val(x+' '+y)
            $("#div1").css({
                'left':x,
                'top':y
            })
        })
    </script>
</body>
</html>

weixin_33968104

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js进阶 12-3 如何实现元素跟随鼠标移动

js进阶 12-3 如何实现元素跟随鼠标移动一、总结一句话总结：获取鼠标位置，将鼠标位置设置为元素偏移即可。 1、用什么事件获取鼠标位置？用mousemove可以获取鼠标移动的时候的位置 $(document).mousemove(function(e){ 2、mousemove的调用对象是谁？想知道在哪个里面动，就调谁，这里是document...
复制链接

扫一扫