js 图片随着鼠标移动而移动

已于 2023-08-28 14:28:05 修改
阅读量305 收藏
点赞数 1
分类专栏： Web 前端 文章标签： javascript 前端 html
于 2023-08-28 13:59:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_64893566/article/details/132537124
版权
本文介绍了如何使用HTML、CSS和JavaScript实现图片大小设置和位置动态跟随鼠标移动的效果。通过CSS设置了图片的尺寸和圆角，利用`mousemove`事件在JavaScript中更新图片的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

引入一张图片 设置大小样式

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
        img {
            width: 200px;
            height: 200px;
            /* 圆角 */
            border-radius: 50%;
            /* 子绝 父相（此时父元素是body）*/
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="../img/10.jpg" alt="">

</body>

</html>

效果

 js 代码

代码1、2相同

    <script>
        var img = document.querySelector('img')

        // 绑定的是页面文档（鼠标在页面上移动而移动）
        //代码1
        document.onmousemove=function(e){
            // 给予可视区域的坐标
            img.style.left = e.clientX + 'px'
            img.style.top = e.clientY + 'px'
            console.log('横坐标' + e.clientX + ',纵坐标' + e.clientY);
         }
    </script>
   <script>
        var img = document.querySelector('img')
            // 绑定的是页面文档（鼠标在页面上移动而移动）
            // 代码2
        document.addEventListener('mousemove', function(e) {
            // 给予可视区域的坐标
            img.style.left = e.clientX + 'px'
            img.style.top = e.clientY + 'px'
            console.log('横坐标' + e.clientX + ',纵坐标' + e.clientY);
        })
    </script>

效果

跟随鼠标移动 2020/1/24
weixin_50286102的博客
11-24 288
跟随鼠标移动 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五张连篇，点击左右按钮可以移动！（图片左右滚动特效）
03-19
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）主要用于想实现图片左右能滚动，点击左右按钮图片可以移动！！不错的！
JavaScript网页内图片跟随鼠标移动
m0_53162363的博客
06-18 610
【代码】JavaScript网页内图片跟随鼠标移动。
js鼠标事件实现图片随着鼠标移动
m0_56329037的博客
04-08 1349
js鼠标事件实现图片随着鼠标移动 逻辑分析 1.鼠标不断移动，使用鼠标事件;mousemove 2。在页面移动中 ，给document注册事件 3.图片要移动的核心距离，而且不占位置， 我们使用绝对定位 4.核心距离：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标为图片的top和left值就可以移动图片 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
【JS】图片跟随鼠标实时/点击移动
xxxxxwxx的博客
08-23 557
【代码】【JS】图片跟随鼠标实时/点击移动。
JS 图片跟随鼠标移动
weixin_50784508的博客
06-11 426
【代码】JS 图片跟随鼠标移动。
js实现图片放大并跟随鼠标移动特效
10-17
总的来说，实现图片跟随鼠标移动并放大的JavaScript特效涉及到JavaScript事件处理、DOM操作以及CSS样式控制。这个特效的实现既提高了用户的交互体验，又展示了JavaScript在网页动态效果方面的强大能力。在实际项目中...
js实现文字跟随鼠标移动而移动的方法
10-24
接下来，我们将详细介绍js实现文字跟随鼠标移动的原理和具体实现方法。 首先，要实现文字跟随鼠标移动，需要对鼠标移动事件进行监听。在JavaScript中，可以使用`document.onmousemove`事件监听器来捕捉鼠标的移动。...
JavaScript简单实现鼠标移动切换图片的方法
10-22
在本篇文档中，作者详细地介绍了如何使用JavaScript来实现鼠标移动时切换图片的功能。该功能的实现涉及到了JavaScript事件监听、DOM操作及图片资源的管理等知识点。接下来，我们将深入探讨这些知识点。 首先，从...
js实现鼠标左右移动，图片也跟着移动效果
12-12
效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。 思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值 布局：大盒子里面是图片，大盒子...
js实现图片跟随鼠标移动效果
10-16
#### js图片跟随鼠标移动 js图片跟随移动 js跟随鼠标移动 这些标签为文章内容进行了分类和定位，表明了文章的内容是关于如何使用JavaScript来实现图片跟随鼠标移动的。标签也提示了相关的搜索关键词，便于有兴趣的...
原生js图片跟随鼠标移动点击放大图片3D展示
11-03
原生js图片跟随鼠标移动点击放大图片3D展示 原生js图片跟随鼠标移动点击放大图片3D展示
JavaScript （实例：实现鼠标移动到图片上后图片放大同时不超出指定范围）
HeartIsland的博客
08-09 6924
实例：实现鼠标移动到图片上后图片放大同时不超出指定范围
js特效——根据鼠标位置移动的图片
qq_52430605的博客
09-08 2406
看到别人的网站上有这种特效，便打算学习后自己做出来
鼠标点击哪里图片就移动到哪里
qq_44505797的博客
01-19 1232
开发工具与关键技术：DW JavaScript 作者：Mr_肖先生 撰写时间：2019年1月19日 首先我们要给html设置一些基本样式，创建与引入一个js文件 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标点击哪图片就移动到哪&lt;/title&gt;
JavaScript图片跟随鼠标移动
weixin_67107650的博客
04-07 2294
这次带来的是最近新学了一个坐标知识，利用onmousemove事件加坐标可以完成一个小案列。 1.把小猫咪图片放到img标签里面。 2.因为这关于是移动的，所以要给个定位跟随事件移动。（上面那个背景颜色可以不用管，我就单纯看见一片白色有点耀眼，所以换一个颜色） 3.看到这里，是可以看到我们没有给img标签设置到id，我们就不用这么麻烦设置id获取了，直接利用querySelector方法获取指定标签就行。 4.下面就是给img绑定鼠标移动事件，声明和获取到水平坐标...
JS获取鼠标点击时图片的相对坐标位置并添加自定义内容
ztnhnr的专栏
11-30 4923
因功能需要在图片上点击时，添加自定义的内容。本来想用图片的热区useMap实现，但发现useMap只支持href跳转属性，不能添加自定义的内容。最后通过网上搜索方案，找到如下解决方法。 在点击图片时，通过鼠标点击位置计算点击的坐标，然后在点击的位置添加自定义内容。 示例代码如下： <!DOCTYPEhtml> <htmllang="en"> <head> <basetarget="_self"> <m...
js实现点击图片，使图片跟随鼠标移动（把注释打开是图片随机位置）
最新发布
yyyyyyysc的博客
10-30 363
js实现点击图片，使图片跟随鼠标移动（把注释打开是图片随机位置）
js实现图片跟随鼠标移动
doiwed的博客
12-25 3373
首先挑选好自己心意的动图： 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
用js让背景图片随着鼠标移动而移动
04-21
好的，以下是实现背景图片随着鼠标移动而移动的JS代码： HTML部分： ``` <body> <div id="background"></div> </body> ``` CSS部分： ``` body { overflow: hidden; } #background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('your_background_image_url_here'); background-size: cover; background-position: center; } ``` JS部分： ``` var background = document.getElementById('background'); document.addEventListener('mousemove', function(e) { var x = e.clientX / window.innerWidth; var y = e.clientY / window.innerHeight; background.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)'; }); ``` 这段代码会给页面添加一个可视区域大小的固定背景，并且在鼠标移动时让背景图片随着鼠标的移动向相应方向平移。调整代码中的 translate 值可以改变背景移动的速度和方向。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值