javaScript，如何让一个div盒子随着鼠标移动而移动

半杯可可

已于 2023-05-31 10:33:44 修改

阅读量902

点赞数 1

分类专栏： Java相关文章文章标签： javascript 计算机外设前端

于 2023-05-17 14:43:36 首次发布

本文链接：https://blog.csdn.net/m0_67840539/article/details/130724189

版权

Java相关文章专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章介绍了如何使用原生JavaScript和JQuery来实现一个div元素随着鼠标的移动而移动。通过获取鼠标坐标并更新div的样式，可以在鼠标悬停在按钮上时显示一个随鼠标位置改变的提示框。示例代码提供了具体的实现方法。

摘要由CSDN通过智能技术生成

前言：如果想让一个div的盒子随着鼠标移动而移动，那么就必须获取到鼠标的坐标！

文章目录：

原JavaScript实现
如果使用JQuery实现

关键字

获取左坐标
- var left = event.pageX ;
获取下坐标
- var top = event.pageY ;

在Idea里面，这个获取方式已经过时了的,不多说，直接看下面代码，v+v就可以直接html运行测试

虽然event获取方式过时了，但还是可以用的！

QQ录屏20230517142105

一、原JavaScript js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>

</head>
<body>
<div class="layui-btn-container">



    <button id = "buttonid" style="cursor: pointer" onmouseover="pri1('我叫张三')" onmouseout="out()" >我叫张三</button>
    <button id = "buttonid2"style="cursor: pointer" onmouseover="pri1('我叫李四')"onmouseout="out()">我叫李四</button>
    <button id = "buttonid3"style="cursor: pointer" onmouseover="pri1('我叫王五')"onmouseout="out()" >我叫王五</button>
    <button id = "buttonid4"style="cursor: pointer" onmouseover="pri1('我叫赵六')"onmouseout="out()">我叫赵六</button>
    <button id = "buttonid5"style="cursor: pointer" onmouseover="pri1('我叫李琦')" onmouseout="out()">我叫李琦</button>
    <button id = "buttonid6"style="cursor: pointer" onmouseover="pri1('我叫王八')" onmouseout="out()">我叫王八</button>
    <button id = "buttonid7"style="cursor: pointer" onmouseover="pri1('我叫老旧')" onmouseout="out()">我叫老旧</button>
    <button id = "buttonid8"style="cursor: pointer" onmouseover="pri1('我叫试试')" onmouseout="out()">我叫试试</button>

    <div id = "div1" style="width:300px; height:300px; border: 1px solid red; display: none;cursor: pointer"></div>




</div>


<script>

   function pri1(name){
       var left = event.pageX ;
       var top = event.pageY ;
       document.getElementById("div1").innerText = name;
       document.getElementById("div1").style.display="block";
       document.getElementById("div1").style.left=left+"px";
       document.getElementById("div1").style.top=top+40+"px";
       document.getElementById("div1").style.position="absolute";
   }

   function out(){

       document.getElementById("div1").style.display="none";

   }

</script>
</body>
</html>

二、如果使用JQuery也实现相关的操作呢？？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
<body>
<div class="layui-btn-container">



    <button id = "buttonid" style="cursor: pointer" onmouseover="prin2('我叫张三')" >我叫张三</button>
    <button id = "buttonid2"style="cursor: pointer" onmouseover="prin2('我叫李四')">我叫李四</button>
    <button id = "buttonid3"style="cursor: pointer" onmouseover="prin2('我叫王五')" >我叫王五</button>
    <button id = "buttonid4"style="cursor: pointer" onmouseover="prin2('我叫赵六')">我叫赵六</button>
    <button id = "buttonid5"style="cursor: pointer" onmouseover="prin2('我叫李琦')" >我叫李琦</button>
    <button id = "buttonid6"style="cursor: pointer" onmouseover="prin2('我叫王八')" >我叫王八</button>
    <button id = "buttonid7"style="cursor: pointer" onmouseover="prin2('我叫老旧')" >我叫老旧</button>
    <button id = "buttonid8"style="cursor: pointer" onmouseover="prin2('我叫试试')">我叫试试</button>

    <div id = "div1" style="width:300px; height:300px; border: 1px solid red; display: none;cursor: pointer"></div>




</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.3/dist/layui.js"></script>
<script>
    

    function  prin2(name) {
       // 加载 LayUI 提供的相关模块
       layui.use(['layer', 'jquery'], function () {
           // 得到模块实例对象
           var layer = layui.layer;
           var $ = layui.jquery;


           var left = event.pageX ;
           var top = event.pageY ;

           $("#div1").text(name);
           $("#div1").css("left",left);
           $("#div1").css("top",top+40);
           $("#div1").css("position","absolute");
           $(function(){
               $(this).hover(function(){
                   $("#div1").show();
               },function(){
                   $("#div1").hide();
               });
           });
       });


   }

</script>
</body>
</html>