鼠标跟随案例：用js实现盒子跟随鼠标移动

需求：当我们鼠标放在div身上时，它的孩子p标签能够显示，而且跟着鼠标一起移动，

思路：

● 想让p标签跟着鼠标一起移动：运用鼠标移动事件，还需要p标签定位；（mousemove：鼠标移动事件）

● 定位以后，先隐藏p标签；当鼠标在div身上时才显示p标签（display：none；）

● 鼠标在div身上移入移出时，p标签显示和隐藏；（mouseover、mouseout：鼠标移入移出事件）

● p标签跟随鼠标移动，让鼠标所在位置距离鼠标所在对象div本身左上角位置，计算出offsetX和offsetY，因为p标签是绝对定位，而且有父盒子，所以它的定位距离是相对父盒子div来讲的，那么此时将offsetX和offsetY赋值给p标签定位的left和top值，也就是p标签距离父盒子的位置，同样是鼠标所在位置，这时鼠标在哪里，p标签就在哪里定位，就实现了p标签跟随鼠标移动的效果。

● 上面虽然实现了p标签跟随鼠标移动，但是存在问题就是offsetX和offsetY是相对于触发事件左上角的距离，当p标签跟着鼠标移动的过程中，难免鼠标会误跑到p标签身上，此时这个offsetX和offsetY就不在是相对于div左上角的距离了，p标签此时的定位就会出现问题。（可能又有人疑惑为什么鼠标跑到p标签上了，p标签没有绑点击事件，父盒子绑了点击事件，父盒子也会触发，详细介绍请见：事件的传递：标准事件流解释仅仅点击子盒子，绑定事件的父盒子会触发_陌一一的博客-CSDN博客）

● 给p标签加一个样式：pointer-events：none；pointer-events是鼠标事件，加了这个样式，p标签就不会出现上面的效果了。这个属性称为“穿透”。

● 添加完定位后结果：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;}</style>
</head>
<body><div id="box">yiyi<p>自我介绍</p></div><script></script>
</body>

结果：

● 鼠标在div身上移入移出，p标签显示隐藏的效果：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;/* 隐藏 */display: none;}</style>
</head>
<body><div id="box">yiyi<p>自我介绍</p></div><script>box.onmouseover = function(){this.firstElementChild.style.display = "block"}box.onmouseout = function(){this.firstElementChild.style.display = "none"}</script>
</body>

结果：

● 添加鼠标移动事件以后：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;/* 隐藏 */display: none;}</style>
</head>
<body><div id="box">yiyi<p>自我介绍</p></div><script>box.onmouseover = function(){this.firstElementChild.style.display = "block"}box.onmouseout = function(){this.firstElementChild.style.display = "none"}box.onmousemove = function(evt){this.firstElementChild.style.left = evt.offsetX+"px"this.firstElementChild.style.top = evt.offsetY+"px"}</script>
</body>
</html>

效果：

● 添加完：pointer-events：none ；以后效果：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;/* 隐藏 */display: none;/* 穿透 */pointer-events: none;}</style>
</head>
<body><div id="box">yiyi<p>自我介绍</p></div><script>box.onmouseover = function(){this.firstElementChild.style.display = "block"}box.onmouseout = function(){this.firstElementChild.style.display = "none"}box.onmousemove = function(evt){this.firstElementChild.style.left = evt.offsetX+"px"this.firstElementChild.style.top = evt.offsetY+"px"}</script>
</body>
</html>

结果：

鼠标跟随案例：用js实现盒子跟随鼠标移动相关推荐

html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
js效果 div跟随鼠标移动
js效果 div跟随鼠标移动 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
图片跟随鼠标移动案例
文献种类:专题技术总结文献开发工具与关键技术: DW前端技术作者:彭学员 :年级:2004 :撰写时间:2021 年 5 月 17日文献编号: ...
JS实现眼睛跟随鼠标特效
效果展示 JS使用眼睛跟随特效代码展示实现原理见代码注释 <div class="face"><div class="eye">&l ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
CSS自定义鼠标样式。JS获取鼠标坐标，实现提示气泡框跟随鼠标移动
cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default; /*获取鼠标位置,让提示气泡框跟随 ...

鼠标跟随案例：用js实现盒子跟随鼠标移动

鼠标跟随案例：用js实现盒子跟随鼠标移动相关推荐

最新文章

热门文章