跟随鼠标移动

没有翅膀却想飞上天空892

已于 2022-05-12 13:50:16 修改

阅读量41

点赞数

文章标签： javascript

于 2022-05-12 13:45:02 首次发布

本文链接：https://blog.csdn.net/qq_69180398/article/details/124729424

版权

<!DOCTYPE html>

<head>

<title>案例分析：跟随鼠标的天使</title>

<style>

img {

position: absolute;

top: 0px;

left: 0px;

}

</style>

</head>

<body>

let img = document.querySelector('img');

document.addEventListener('mousemove', function(e) {

img.style.top = e.pageY-6+'px';

img.style.left = e.pageX-7+'px';

});

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

没有翅膀却想飞上天空892

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用js实现图片在页面自定义进行上,下,左,右的移动

G18239715095的博客

10-16

565

使用js实现图片在页面自定义进行上,下,左,右的移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p&...

js特效-跟随鼠标的小红心

qq_41670147的博客

11-30

983

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

参与评论您还未登录，请先登录后发表或查看评论

图标跟随鼠标

cnicfhnui的博客

03-31

3457

创建一个影片剪辑图标，实例名称输入：cursor_mc 新图层1，脚本新图层2，影片剪辑图标新图层3，背景图层1帧1，脚本 Mouse.hide();//隐藏鼠标指针 stage.addEventListener(MouseEvent.MOUSE_MOVE, moveThatMouse);//舞台添加鼠标移动事件监听函数 function mov

JS 网页中通过js控制图片的左右上下移动

happy20110802的专栏

01-05

1296

<!-- function Fleft() { var x1=document.getElementById("img1").style.left; var x=eval(Number(x1.substring(0,x1.length-2))-20); document.getElementById("img1").style.left=x+"px"; } function F

利用JavaScript创建随机数与随机图片

weixin_34087307的博客

03-24

227

创建随机数①自JavaScript产生后，好多浏览器中都有内置的随机数发生方法。例如：varnumber=Math.random();该方法产生一个0到1之间的浮点数。②基于时间，亦可以产生随机数。例如：varnow=newDate();varnumber=now.getSeconds();这将产生一个基于...

js实现文字跟随鼠标移动而移动的方法

10-24

在进行Web开发时，实现文字跟随鼠标移动的效果是一种常见的互动特效。这不仅增强了页面的视觉吸引力，也能够提升用户体验。通过JavaScript（通常简称为js）我们能够实现这一效果。接下来，我们将详细介绍js实现文字...

HTML5层叠图片跟随鼠标移动特效

06-24

在“跟随鼠标移动”的特效中，TweenMax被用来处理图片的放大、缩小和隐藏，以及随着鼠标移动的轨迹进行动画播放。实现这一特效的步骤通常包括以下几个关键部分： 1. **HTML结构**：首先，你需要在HTML文档中插入...

jQuery实现div跟随鼠标移动

10-19

### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...

js实现图片放大并跟随鼠标移动特效

10-17

在网页设计中，为了提升用户体验，常常需要实现一些动态效果，比如图片放大并跟随鼠标移动的特效。这种特效常见于电商网站的商品展示，用户可以通过鼠标移动来预览商品的细节。本文将详细介绍如何使用JavaScript来...

图片循环自动播放js

10-23

新建一个html文件和div层用于需要显示的地方，引入该脚本可自动播放图片，具有播放暂停功能。

JavaScript随机图片显示

07-27

NULL 博文链接：https://shanshandaocao-163-com.iteye.com/blog/752765

可以循环播放图片的js脚步

07-06

这是一个调理清晰的javascript代码，用来展示图片循环播放代码，下载后需要指定播放的图片，然后用浏览器就可以播放了！

js实现键盘控制图片的移动

07-26

function test(id){ alert(id); } if(typeof GetControlundefined) GetControl=function (id) { return document.getElementById(id); }; function KeyDown() { var control=document.getElementById("dSquare"); var key; try{ key=event.keyCode; //取得键盘Code编号 } catch(a){ //对于Firefox来说，不支持event.keyCode key=KeyDown.arguments[0].keyCode; } switch(key) { case 40://40 down if(parseInt(control.style.top)<=100){ control.style.top=(parseInt(control.style.top)+1)+'px'; }else{alert('不可以再前行啦')} break; case 39://39 right control.style.left=(parseInt(control.style.left)+1)+'px'; break; case 38://38 up control.style.top=(parseInt(control.style.top)-1)+'px'; break; case 37://37 left control.style.left=(parseInt(control.style.left)-1)+'px'; break; } } document.onkeydown=KeyDown; //附加事件 document.onkeypress=KeyDown; //附加事件

网页图片(图标)鼠标跟随小案例分享

tajia220的博客

07-10

346

http模块: 插入一张图片 <imgsrc="images/xxx.gif"alt=""> css模块: 给图片添加绝对定位 img{ position:absolute; } JavaScript模块: <imgsrc="images/xxx.gif"alt=""> <script> varpic=document.querySelector('...

js 每隔1秒钟切换一张图片

lcxdawn的博客

11-02

523

需要把图片名字统一成1，2，3，4。

JS上下左右键盘控制图片移动

qq_36401980的博客

04-18

5885

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片移动</title></head&g

JavaScript按上下左右键实现图片在网页上的移动

weixin_47982238的博客

08-06

991

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> img{ cursor: pointer; position: absolute; } </style> </h.

HTML:用JavaScript——onkeydown通过按下wasd四个字母，使图片上下左右移动