js-跟着鼠标移动的图片

最新推荐文章于 2024-06-03 13:46:57 发布
最新推荐文章于 2024-06-03 13:46:57 发布
阅读量927 收藏 8
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45496075/article/details/105522412
版权
这篇博客介绍了如何使用JavaScript创建一个图片跟随鼠标移动的效果。首先需要对JavaScript有基础认识，然后在项目中放入图片，通过设置图片的left和top属性为鼠标的位置（e.pageX, e.pageY），实现图片随鼠标移动的功能。在WebStorm或HBuilder等编辑器中编写代码，保存后在浏览器预览即可看到效果。" 139300210,20286345,前后端BUG判断指南,"['前端开发', '后端开发', 'bug排查', '接口调试', '软件测试']
摘要由CSDN通过智能技术生成

在这里玩一下页面中跟着鼠标移动的图片效果，在这里之前，大家需要对js有基本的认识，才能理解这个简单的代码
1.使用的工具：WebStorm(当然也可以用HBuilder)

2.先找一个图片，放到项目imges文件中
我的图片名是timg.gif
在这里插入图片描述
3.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
最低0.47元/天 解锁文章
凌风少年z
关注
专栏目录
图片随鼠标移动（JS）
06-16
兼容多浏览器，我已在实际中用了，很棒，图片随着鼠标移动而移动。
js实现 鼠标拖动图片
wawa129的专栏
07-12 174
拖动演示 #plane1 {position:absolute; left:10; top:20; z-index:5} #plane2 {position:absolute; left:10; top:20; width:800; height:600; z-index:999; background:url(mask1.png) no-repe...
js图片跟随鼠标移动代码
06-02 213
大家浏览网页的时候，见到过图片跟随鼠标移动的js特效，效果非常好，是怎么实现的呢，实现这个功能很简单，感兴趣的朋友一起看看吧 在很多网站上能看到图片跟随鼠标移动的JS特效，其实做法很简单，在这里与大家分享下。 在实现这个特效之前，需要了解JS中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里，http://www
简单的js实现图片跟随鼠标移动效果
xiamoziqian的博客
12-26 3783
概述：通过获取鼠标距离页面的左边距和上边距，来动态设置图片的left和top值。 html部分 &lt;img src="./img/qqhf-16.jpg" width="60" alt=""&gt; css部分 &lt;style&gt; img{ position:absolute; //设置图片绝对定位 } &lt;/style&gt; js部分 &lt;script
JavaScript实现图片跟随鼠标
张璟冰的博客
05-14 328
**index.html** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蝴蝶移动</title> <link rel="stylesheet" hre
基于JavaScript实现鼠标箭头移动图片跟着移动
10-21
其中，让图片跟随鼠标移动就是一种常见的特效。这个效果可以通过JavaScript实现，代码简洁且易于理解。在本篇文章中，我们将深入探讨如何使用JavaScript来实现这个功能。 首先，我们要明白实现这个效果的基本思路：...
js实现鼠标左右移动，图片也跟着移动效果
10-20
在本文中，我们将探讨如何利用JavaScript（简称js）实现当鼠标左右移动时，页面上的图片也会相应地左右移动的效果。这种效果可以让网页元素显得更加生动有趣，增强用户交互体验。 ### 关键技术点与实现思路 1. **...
js实现图片放大并跟随鼠标移动特效
10-17
总的来说，实现图片跟随鼠标移动并放大的JavaScript特效涉及到JavaScript事件处理、DOM操作以及CSS样式控制。这个特效的实现既提高了用户的交互体验，又展示了JavaScript在网页动态效果方面的强大能力。在实际项目中...
跟随鼠标移动 2020/1/24
weixin_50286102的博客
11-24 256
跟随鼠标移动 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实现图片跟随鼠标移动效果
10-16
主要为大家详细介绍了js实现图片跟随鼠标移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现使用鼠标拖拽切换图片的方法
10-24
主要介绍了js实现使用鼠标拖拽切换图片的方法,涉及javascript操作图片实现轮播效果的相关技巧,非常具有实用价值,需要的朋友可以参考下
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）
01-09
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
js图片跟随鼠标移动效果
最新发布
猿码互联
06-03 969
要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。
JavaScript鼠标拖动图片
Bruce_wjh的博客
08-13 992
<!DOCTYPE html> <html> <head> <style type='text/css'> img { position: absolute; } </style> <body> <script type='text/javascript'> function moveImage() { ...
JavaScript实现鼠标拖动图片移动效果
weixin_44439442的博客
02-20 7444
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; img{width:
JS（DOM）—鼠标与图片同时移动
有道无术，术尚可求，有术无道，止于术。
12-25 301
需求：鼠标移动事件，鼠标在哪，图片在哪里。 代码展示： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #img1 {
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
热门推荐
weixin_46022934的博客
12-20 1万+
背景与效果图 1.背景如下（功能图）： 2.效果图如下： 拖拽后的效果 缩放的效果 放大的效果 一、功能：支持鼠标长按拖拽 1.鼠标事件： 2.拖拽功能流程 3.拖拽部分代码如下 二、功能：滚轮控制图片放大缩小 1.鼠标事件(推荐使用onwheel；mousewheel存在安全隐患) 2.功能流程： 3.具体代码如下： 三、案例功能的完整代码如下： 四、总结(一定要看，功能是有坑的)
js实现图片拖动
MonkeyBananas的博客
01-25 2260
HTML代码 <div id="imgDiv"> <img id="img"/> </div> js代码 //给图片Div绑定鼠标按下事件 $("#imgDiv").addEventListener("mousedown", function(divEvent){ //按下后，给整个document绑定鼠标移动事件（我这里图片可以在整个document拖动，所以给document绑定，也可以按自己需求进行调整） document.onmousemove = fun
怎么写屏幕跟着鼠标移动
04-24
您好！关于您的问题，您可以使用JavaScript代码来实现屏幕跟着鼠标移动。具体代码如下： ``` <!DOCTYPE html> <html> <head> <title>Screen Follow Mouse</title> <meta charset="utf-8"> <style type="text/css"> body { margin: 0; padding: 0; overflow: hidden; } #screen { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #333; color: #fff; font-size: 24px; text-align: center; line-height: 100vh; user-select: none; cursor: none; } </style> </head> <body> <div id="screen">Screen Follow Mouse</div> <script type="text/javascript"> document.addEventListener('mousemove', function(event) { var screen = document.getElementById('screen'); var mousePosX = event.clientX; var mousePosY = event.clientY; screen.style.transform = 'translate(' + mousePosX + 'px,' + mousePosY + 'px)'; }); </script> </body> </html> ``` 这段代码可以创建一个全屏的屏幕，并让它跟随鼠标移动。当鼠标移动时，JavaScript代码通过获取鼠标位置，并将屏幕的位置进行相应的变换来实现屏幕跟随鼠标移动。同时，代码还设置了一些样式，如让屏幕背景色为黑色，文字为白色，并且禁止选取屏幕内容和隐藏鼠标指针。 希望这个答案能够帮助您解决问题！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值