完成图片跟随鼠标移动案例

最新推荐文章于 2024-04-10 10:34:13 发布
最新推荐文章于 2024-04-10 10:34:13 发布
阅读量62 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69096723/article/details/125212550
版权

JavaScript 鼠标事件 图片定位 交互设计 DOM操作
关键词由CSDN通过智能技术生成

<!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-UA-Compatible" content="ie=edge">

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

    <style>

        img {

            position: absolute;

            top: 0px;

            left: 0px;

        }

    </style>

</head>

 

<body>

    <img src="..//imgs/angel.gif" alt="">

    <script>

        // 1. 获取元素

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

 

        // 2. 添加监听事件 事件对象

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

            // 2.1 获取鼠标的位置坐标

            console.log(e.pageX);

            console.log(e.pageY);

            // 2.2 把鼠标的位置坐标赋值给图片的top和left属性

            img.style.top = e.pageX-40+'px';

            img.style.left = e.pageY-48+'px';

        })

    </script>

</body>

 

</html>

m0_69096723
关注
使用js实现图片在页面自定义进行上,下,左,右的移动
G18239715095的博客
10-16 565
使用js实现图片在页面自定义进行上,下,左,右的移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p&...
【JS案例】图片跟随鼠标指针移动
weixin_49667641的博客
03-04 592
原理： 前提：图片的采用绝对定位（即：position：absolute）为窗口对象window绑定鼠标移动事件，利用事件处理函数中的反馈对象来获得位置信息，利用这个信息再改变图片位置 效果： 就是鼠标到哪图片到哪 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
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();这将产生一个基于...
HTML5层叠图片跟随鼠标移动特效
07-24
在本案例中，“HTML5层叠图片跟随鼠标移动特效”是一个利用HTML5特性实现的互动视觉效果。这个特效使得图片能够根据用户的鼠标移动而动态改变，呈现出一种层叠式的放大、缩小和隐藏的动画效果。 首先，让我们来了解...
jquery图片跟随鼠标移动效果
06-11
"jQuery图片跟随鼠标移动效果"就是一种常见的交互式图像展示技术。这个效果主要应用于全屏或宽屏背景图片，尤其是那些分辨率较高，单屏无法完全显示的图片。通过JavaScript库jQuery，我们可以实现图片在用户鼠标移动...
jquery图片跟随鼠标晃动效果
06-11
"jquery图片跟随鼠标晃动效果"是一个基于jQuery库实现的特效，旨在为用户提供一种新颖的交互方式，使图片在鼠标移动时产生动感十足的视觉体验。这个特效由韩雪冬工作室开发，因其精美的设计和出色的动态性能，受到了...
HTML5层叠图片跟随鼠标移动特效特效代码
03-20
TweenMax的`to()`或`fromTo()`方法可以用来创建动画，改变图片的`scale`（缩放比例）和`opacity`（透明度），使其看起来像是跟随鼠标移动。 例如，我们可以为每个图片定义一个动画函数，该函数接收鼠标的x和y坐标...
图片循环自动播放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
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;图片移动&lt;/title&gt;&lt;/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四个字母，使图片上下左右移动
最新发布
m0_59401963的博客
04-10 345
onkeydown是Web开发中处理键盘输入的重要工具之一，它提供了实时响应用户键盘操作的能力。
html完成一个跟随鼠标移动的层
11-20
跟随鼠标移动的层 #follower { position: absolute; width: 50px; height: 50px; background-color: red; border-radius: 50%; } <div id="follower"></div> document.onmousemove =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值