【JS案例】图片跟随鼠标指针移动

最新推荐文章于 2023-06-18 10:33:25 发布
VIP文章 最新推荐文章于 2023-06-18 10:33:25 发布
阅读量536 收藏
点赞数
分类专栏： js案例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49667641/article/details/123273346
版权

原理：

前提：图片的采用绝对定位（即：position：absolute）为窗口对象window绑定鼠标移动事件，利用事件处理函数中的反馈对象来获得位置信息，利用这个信息再改变图片位置

效果： 就是鼠标到哪图片到哪


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http
最低0.47元/天 解锁文章
亿咕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript图片跟随鼠标移动
yuguofenglin的博客
05-08 782
把小电视图片img标签里面。 因为这关于js移动所以要给img设置一个定位。 这里我们没有给img标签设置到id，用一个新方法querySelector获取指定标签。 下面就是给img绑定鼠标移动事件，声明和获取到水平坐标和垂直坐标的属性。 、 然后再调用到img标签改变相对位置（X是left水平方向）（Y是top垂直方向）就好了。 以下是效果图。 ...
跟随鼠标移动 2020/1/24
weixin_50286102的博客
11-24 239
跟随鼠标移动 mousemove只要我们鼠标移动1px 就会触发这个事件 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片 .千万不要忘记给left 和top 添加px 单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
js图片跟随鼠标移动
01-12
直接下载后直接另存为html，然后修改里面的图片链接即可
js实现图片跟随鼠标移动效果
10-16
主要为大家详细介绍了js实现图片跟随鼠标移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现图片跟随鼠标移动
doiwed的博客
12-25 3260
首先挑选好自己心意的动图： 1.在自己的html里面添加img标签，把该图片放进去。 2.给图片设置position：fixed 、z-index：1让图片始终保持在最顶层 <style> #img_MouseMove{ width:xxxpx; height:xxxpx; position:fixed; z-index:1; visibility: hidden;/*隐藏图片*/ } </style> <img src="图片地址" id="img_M
利用JavaScript使图片跟随鼠标移动
余月初贰的博客
07-02 1716
JavaScript图片跟随鼠标移动
js实现图片放大并跟随鼠标移动特效
10-17
主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现图片跟随鼠标移动效果的方法
10-24
主要介绍了javascript实现图片跟随鼠标移动效果的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
js实现文字跟随鼠标移动而移动的方法
10-24
主要介绍了js实现文字跟随鼠标移动而移动的方法,实例分析了javascript处理鼠标事件及文字特效的技巧,需要的朋友可以参考下
javascript DIV跟随鼠标移动
10-22
主要介绍了javascript DIV跟随鼠标移动，有一个div跟随鼠标移动的结果，有一连串跟随鼠标移动的效果，感兴趣的小伙伴们可以参考一下
js实现鼠标左右移动，图片也跟着移动效果
12-12
效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。 思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值 布局：大盒子里面是图片，大盒子position:relative；图片position:absolute; <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{margin:0;} #wrap{width:800px;height:500px;margin:30px auto; border:1px s
js 图片跟随鼠标移动
weixin_45893243的博客
08-01 230
叒叒叒是pink老师的课里讲了一个非常有意思的案例 图片可以跟着鼠标移动 主要是添加一个mousemove的监听事件 实时获取鼠标的坐标 同时改变图片的坐标 html <img src="gif.gif" alt="" style="position: absolute;"> //位置要为绝对 才能不占用位置 js <script> var pic = document.querySelector('img') document.addEventListener('mou
JS 图片跟随鼠标移动
weixin_50784508的博客
06-11 339
【代码】JS 图片跟随鼠标移动。
JavaScript实现图片跟随鼠标移动
weixin_47304332的博客
05-17 218
代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img style="position: absolute;" src="../Resources/imgs/sheep.gif"> </body> <script&gt
图片跟随鼠标移动案例
m0_56653135的博客
05-17 130
文献种类：专题技术总结文献 开发工具与关键技术： DW前端技术 作者：彭学员 ；年级：2004 ；撰写时间：2021 年 5 月 17日 文献编号： 归档时间： 年 月 日 图片跟随鼠标移动案例 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： DW前端技术 作者：彭学员 撰写时...
JavaScript网页内图片跟随鼠标移动
m0_53162363的博客
06-18 425
【代码】JavaScript网页内图片跟随鼠标移动。
js图片跟随鼠标移动代码
06-02 206
大家浏览网页的时候，见到过图片跟随鼠标移动的js特效，效果非常好，是怎么实现的呢，实现这个功能很简单，感兴趣的朋友一起看看吧 在很多网站上能看到图片跟随鼠标移动的JS特效，其实做法很简单，在这里与大家分享下。 在实现这个特效之前，需要了解JS中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里，http://www
js实现页面上的图片跟着鼠标箭头移动
Sunqlive的博客
08-29 8183
实现页面上的图标跟着鼠标一起移动
jq鼠标移入图片放大切跟随鼠标移动
最新发布
11-28
JQ是指jQuery，是一个流行的JavaScript库，用于简化网页开发中的DOM操作。要实现鼠标移入图片放大，并且跟随鼠标移动，可以通过以下步骤： 1. 在HTML中添加一个图片元素，并为其添加一个唯一的ID，以便后续操作。 2. 使用jQuery的.hover()方法来监测鼠标移入和移出图片的事件。 3. 在鼠标移入事件的处理函数中，使用jQuery的.animate()方法来逐渐增大图片的尺寸。 4. 在鼠标移动事件的处理函数中，获取鼠标的当前位置，然后使用jQuery的.css()方法来动态调整图片的位置。 具体步骤可如下所示： HTML: ``` <img id="myImage" src="图片的URL" alt="图片"> ``` JavaScript: ``` $(document).ready(function(){ $("#myImage").hover( function(){ // 鼠标移入事件处理函数 $(this).animate({ width: '+=50px', // 图片宽度增加50像素 height: '+=50px' // 图片高度增加50像素 }, 200); // 动画持续时间为200毫秒 }, function(){ // 鼠标移出事件处理函数 $(this).animate({ width: '-=50px', // 图片宽度减少50像素 height: '-=50px' // 图片高度减少50像素 }, 200); // 动画持续时间为200毫秒 } ); $("#myImage").mousemove(function(event){ // 鼠标移动事件处理函数 var imagePosition = $(this).offset(); // 获取图片在页面中的位置 var mouseX = event.pageX - imagePosition.left; // 获取鼠标相对于图片的水平位置 var mouseY = event.pageY - imagePosition.top; // 获取鼠标相对于图片的垂直位置 $(this).css({left: mouseX, top: mouseY}); // 动态设置图片的位置 }); }); ``` 以上代码将在页面加载完成后绑定鼠标移入、移出以及移动事件，当鼠标移入图片时，图片逐渐放大，当鼠标移出图片时，图片逐渐恢复原始尺寸；同时，当鼠标在图片上移动时，图片将跟随鼠标的位置移动。注意，需要将代码中的"图片的URL"替换为实际图片的URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值