js实现页面上的图片跟着鼠标箭头移动

最新推荐文章于 2023-09-08 18:50:39 发布
最新推荐文章于 2023-09-08 18:50:39 发布
阅读量8.2k 收藏 2
点赞数 1
分类专栏： js 文章标签： javascript 图片 鼠标 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunqlive/article/details/52352292
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js练习七</title>
<script type="text/javascript">
function Divflying(){
var div=document.getElementById('dv1');
if (!div) {
return;
}
var intX=window.event.clientX;
var intY=window.event.clientY;
div.style.left=intX+"px";
div.style.top=intY+"px";
}
document.οnmοusemοve=Divflying;
</script>
</head>
<body>
<div id="dv1" style="position:absolute;">
<img src="fly.jpg"><br>
低调的跟着鼠标飘过~~
</div>
</body>
</html>
Sunqlive
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js图片跟随鼠标移动效果
猿码互联
06-03 786
要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。
利用JavaScript使图片跟随鼠标移动
余月初贰的博客
07-02 1758
JavaScript图片跟随鼠标移动
跟随鼠标移动 2020/1/24
weixin_50286102的博客
11-24 246
跟随鼠标移动 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实现图片跟随鼠标移动
weixin_68854196的博客
08-01 286
原生js实现图片跟随鼠标移动
js特效——根据鼠标位置移动的图片
最新发布
qq_52430605的博客
09-08 2066
看到别人的网站上有这种特效，便打算学习后自己做出来
js-跟着鼠标移动的图片
凌风少年z
04-14 901
在这里玩一下页面中跟着鼠标移动的图片效果，在这里之前，大家需要对js有基本的认识，才能理解这个简单的代码 1.使用的工具：WebStorm(当然也可以用HBuilder) 2.先找一个图片，放到项目imges文件中 我的图片名是timg.gif 3.代码： <!DOCTYPE html> <html lang="en"> <head> <meta...
js实现图片跟着鼠标飞
qq_44388958的博客
04-05 356
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } bod...
基于JavaScript实现鼠标箭头移动图片跟着移动
10-21
总的来说，实现鼠标箭头移动图片跟着移动的效果并不复杂，只需要理解JavaScript事件处理、DOM操作以及CSS定位即可。这种技术可以应用于各种网页设计中，增加用户与网页的互动性，提升用户体验。通过学习和实践，...
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
10-17
【JavaScript实现盒子跟随鼠标移动与键盘方向键控制】 在网页开发中，我们有时需要创建一些交互性较强的效果，比如让一个元素（如一个红色的盒子）跟随鼠标移动，或者通过键盘的方向键来控制其移动。这涉及到...
JS实现页面鼠标点击出现图片特效
11-19
本文将探讨如何使用JavaScript（JS）来实现一个有趣的特效：当用户在页面上点击鼠标时，图片会在点击的位置出现，并按照预设的动画效果逐渐消失。这个功能可以增加页面的互动性，让页面更加生动。 首先，我们来看...
js图片跟随鼠标移动
01-12
直接下载后直接另存为html，然后修改里面的图片链接即可
js实现图片跟随鼠标移动效果
10-16
主要为大家详细介绍了js实现图片跟随鼠标移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
11-22
在网页设计中，有时我们需要创建一种交互效果，即当用户将鼠标悬停在特定元素上时，会弹出一个信息层，该层不仅显示额外信息，还能跟随鼠标移动，并且有一个箭头指向原来的元素。这种效果能提升用户体验，提供直观的...
JavaScript图片跟随鼠标移动
yuguofenglin的博客
05-08 798
把小电视图片img标签里面。 因为这关于js移动所以要给img设置一个定位。 这里我们没有给img标签设置到id，用一个新方法querySelector获取指定标签。 下面就是给img绑定鼠标移动事件，声明和获取到水平坐标和垂直坐标的属性。 、 然后再调用到img标签改变相对位置（X是left水平方向）（Y是top垂直方向）就好了。 以下是效果图。 ...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1372
Document
js实现：使用鼠标点击箭头控制轮播图的运动
zjy123078_zjy的博客
04-06 775
1.首先来看一下html文件的代码： <div class="main"> <div class="main-wrapper"> <div class="carousel-map" id="banner-group"> <ul class="carousel-img" id="banner-ul"> <li><a href="#"><img src="
【d3.js学习--02】画移动箭头
corner2030的博客
09-28 1357
常常需要画鼠标左右移动箭头。 下面是需要画一个点击箭头可以显示前一天/一月，或者点击向后箭头可以显示向后一天/一月的信息。 当点击向后箭头时，最后一天超过今天时， 显示最近一月的数据。同时隐藏向右箭头。//arrow to select preday/nextday/premonth/nextmonth var graph_width = $("#graph").width(); var mar
html中平移代码怎么用,javascript – HTML5 Canvas：在EaselJS中使用箭头键移动/平移世界...
weixin_36432875的博客
06-09 252
经过一年的反复试验和学习,我觉得我开始更多地了解JavaScript了.所以,现在,我想尝试编写一个简单的2D平台游戏(想想超级马里奥世界或Sonic the Hedgehog).为此,我将使用EaselJS库.我试图找出如何使用左右箭头键在画布中移动/平移“世界”.我知道如何在箭头键的键盘上运行一个函数,但我不太清楚我应该如何接近移动/平移.当按下某个键时,我应该调整画布中每个东西的位置/坐标吗...
新建2.html，编写JavaScript代码，实现键盘方向键控制小飞机图片上下左右移动的效果。初始状态为小飞机头朝上放，鼠标点击小飞机后，顺时针旋转90度，头朝右方，点击键盘后可以控制小飞机的前后左右移动。
05-12
以下是实现该功能的代码： ```html <!DOCTYPE html> <html> <head> <title>小飞机移动</title> <style> body { margin: 0; padding: 0; } canvas { display: block; } </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 加载小飞机图片 var img = new Image(); img.src = "https://i.loli.net/2021/06/09/4E5sZyC1B2w6J7r.png"; // 初始状态为小飞机头朝上放 var angle = 0; // 小飞机的初始位置 var x = canvas.width / 2; var y = canvas.height / 2; // 将小飞机绘制在画布上 function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height); ctx.restore(); } // 点击小飞机后，顺时针旋转90度，头朝右方 canvas.addEventListener("click", function() { angle += Math.PI / 2; if (angle >= 2 * Math.PI) { angle -= 2 * Math.PI; } draw(); }); // 监听键盘按键事件 window.addEventListener("keydown", function(event) { switch (event.keyCode) { case 37: // 左箭头键 x -= 10; break; case 38: // 上箭头键 y -= 10; break; case 39: // 右箭头键 x += 10; break; case 40: // 下箭头键 y += 10; break; } draw(); }); draw(); </script> </body> </html> ``` 在代码中，我们首先加载小飞机的图片，然后定义小飞机的初始位置和角度，将小飞机绘制在画布上。当用户点击小飞机时，我们将小飞机顺时针旋转90度，头朝右方；当用户按下键盘上的方向键时，我们根据按键的不同调整小飞机的位置，并重新绘制小飞机。最终实现了一个可以通过键盘方向键控制小飞机移动的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值