JS实现图片随着鼠标自由移动

最新推荐文章于 2022-12-16 20:40:00 发布
最新推荐文章于 2022-12-16 20:40:00 发布
阅读量4.7k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41557320/article/details/83027190
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/tianshi.gif" id="im" alt="" />
<script src="js/common.js"></script>
<script>
    document.documentElement.onmousemove=function(e){
        //console.log(e);
        //利用clientX和clientY来设置图片的位置也就是鼠标的位置
        my$('im').style.left=e.clientX-40+'px';
        my$('im').style.top=e.clientY-40+'px';
    };
</script>
</body>
</html>

在这里插入图片描述
最终效果如上图，图片可以在页面随着鼠标自由移动。

向前看傻帽儿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js图片跟随鼠标移动效果
猿码互联
06-03 823
要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。
图片随鼠标移动（JS）
06-16
兼容多浏览器，我已在实际中用了，很棒，图片随着鼠标移动而移动。
js图片自由运动
whjwhja6的专栏
12-11 732
var wwidth, wheight;           var ydir = '++'; var xdir = '++'; var x = 1; var y = 1; function getwindowsize() { wwidth = document.body.clientWidth - 55;        wheight = document.body.c
图片跟随鼠标移动
l_sss2019的博客
08-25 1485
图片会跟着鼠标的移动而移动效果
图片跟着鼠标移动
zhang1600的博客
12-30 98
//图片可以是jpg、png、gif的，推荐使用相对路径
基于JavaScript实现鼠标箭头移动图片跟着移动
10-21
总的来说，实现鼠标箭头移动图片跟着移动的效果并不复杂，只需要理解JavaScript事件处理、DOM操作以及CSS定位即可。这种技术可以应用于各种网页设计中，增加用户与网页的互动性，提升用户体验。通过学习和实践，...
js实现精美的图片跟随鼠标效果实例
10-24
在JavaScript中实现精美的图片跟随鼠标效果，主要是通过监听鼠标的移动事件，动态改变图片的位置来达到视觉上的跟随效果。这个实例中，我们利用了HTML、CSS和JavaScript的基本原理，结合浏览器兼容性处理，创建了一...
用js实现小球的自由移动代码
10-27
以下是对标题“用js实现小球的自由移动代码”及其描述所涉及知识点的详细说明： 1. **JavaScript基础**： - 变量声明：`ballX`, `ballY`, `directX`, `directY` 是用于存储小球位置和移动方向的变量，使用全局变量...
javascript DIV跟随鼠标移动
10-22
总的来说，JavaScript结合CSS可以实现丰富的交互效果，如DIV跟随鼠标移动。这个技术可以扩展到更复杂的应用，如创建粒子系统、导航指示器或者其他动态UI元素。了解并掌握这种技术对于前端开发者来说非常有价值，因为...
HTML5层叠图片跟随鼠标移动特效
07-24
使用绝对定位使图片能够在页面上自由移动。 3. **JavaScript代码**：绑定鼠标move事件，当鼠标移动时，获取鼠标的位置，并计算出每个图片的新位置和大小。使用TweenMax的to()方法创建动画，将这些新值应用到图片...
javascript图片自动移动
11-27
图片移动，使用资源代码使我们开发的web项目更加动感，达到一定得美化效果
图片跟着鼠标移动.zip
07-04
图片跟着鼠标移动是一款基于jquery实现的鼠标响应式图片滑动特效。
鼠标事件（图片跟着鼠标移动）
qq_40417326的博客
02-18 690
鼠标移动图片：
图片跟随鼠标偏移
我的博客
11-21 1418
图片跟随鼠标的移动而移动
设置图片跟随鼠标移动
weixin_46002223的博客
08-22 2938
案例介绍 1、鼠标不断移动，使用鼠标移动事件：mousemove 2、在页面中移动，给document注册事件 3、图片要移动距离，而且不占位置，我们使用绝对定位即可 4、核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
图片跟随鼠标的移动案例
qq_52622178的博客
07-19 347
核心原理：每次鼠标移动，我们获取鼠标的最新坐标，将获取的X,Y坐标作为图片的top，left值。 注意： 代码中有两点需要格外注意： 1.我第一次写完的时候，发现图片不随鼠标的移动而移动，最后才知道是没有添加定位（添加绝对定位是因为绝对定位在文档流中不占位置），img是行内元素，没有top，left值。 2.在给top，left赋值的时候，千万不要忘记加 px <style> /* 若不加绝对定位，图片不会随着鼠标走，绝对定位不占位置 */ img{
jQuery实例 | 图标跟随鼠标的移动而移动
weixin_47982238的博客
08-16 410
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; } .shop{ width:300px; height:300px; overflow: hidden; box-shadow:0px 0px 5p.
图片跟随鼠标移动效果的抖动问题
lll_90的博客
12-16 1813
误用offset实现图片跟随鼠标移动效果时，产生的图片抖动问题
HTML+CSS+JS实现：定义一个盒子,引入一张图片, 使图片可以被鼠标拖拽到盒子中
最新发布
05-31
可以通过以下的HTML、CSS和JavaScript代码来实现这个功能： HTML代码： ``` <div id="box"></div> <img id="dragImg" src="image.jpg" draggable="true"> ``` CSS代码： ``` #box { width: 300px; height: 300px; border: 1px solid black; } #dragImg { width: 100px; height: 100px; position: absolute; } ``` JavaScript代码： ``` var dragImg = document.getElementById('dragImg'); var box = document.getElementById('box'); dragImg.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text', e.target.id); }); box.addEventListener('dragover', function(e) { e.preventDefault(); }); box.addEventListener('drop', function(e) { e.preventDefault(); var data = e.dataTransfer.getData('text'); var draggedImg = document.getElementById(data); box.appendChild(draggedImg); }); ``` 我们首先定义了一个盒子（`<div>`元素），并给它设置了一个边框。然后我们引入了一张图片，并通过`draggable`属性将它设置为可拖拽的。我们还给这个图片设置了一个绝对定位，这是因为我们要让它能够在页面上自由移动。 在JavaScript中，我们获取了图片和盒子的元素，并给图片添加了一个`dragstart`事件监听器。当用户开始拖动图片时，`dragstart`事件会被触发，我们会在事件处理函数中将图片的id保存到`dataTransfer`对象中。然后我们给盒子添加了`dragover`和`drop`事件监听器。`dragover`事件监听器用来阻止浏览器默认的拖拽行为，`drop`事件监听器会在用户将图片拖拽到盒子中时被触发。在`drop`事件处理函数中，我们获取了之前保存到`dataTransfer`对象中的图片id，并将这个图片添加到盒子中。 这样，用户就可以通过鼠标拖拽图片到盒子中了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值