鼠标跟随案例

已于 2022-06-13 18:11:35 修改
阅读量53 收藏
点赞数
文章标签： javascript html
于 2022-06-13 18:03:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61320547/article/details/125264916
版权

HTML CSS JavaScript 鼠标跟随 事件监听
关键词由CSDN通过智能技术生成

如下所示：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            /* 加个定位，来  */
            position: absolute;
            left: 1px;
        }
    </style>
</head>

<body>
    <img src="../img/不可见.png" alt="" style="width: 50px;height: 50px;">
    <script>
        var bgh = document.querySelector('img');
        var bodys = document.getElementsByTagName('body');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            bgh.style.left = x - 25 + 'px';
            bgh.style.top = y - 25 + 'px';
        })
    </script>
</body>

</html>

拂晓等明月
关注
使用js实现图片在页面自定义进行上,下,左,右的移动
G18239715095的博客
10-16 571
使用js实现图片在页面自定义进行上,下,左,右的移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p&...
鼠标跟随案例：用js实现盒子跟随鼠标移动
YY的博客
10-21 2382
鼠标跟随案例：实现盒子跟随鼠标移动
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 984
<!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 1299
<!-- 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 229
创建随机数①自JavaScript产生后，好多浏览器中都有内置的随机数发生方法。例如：varnumber=Math.random();该方法产生一个0到1之间的浮点数。②基于时间，亦可以产生随机数。例如：varnow=newDate();varnumber=now.getSeconds();这将产生一个基于...
js案例之鼠标跟随jquery版(实例讲解)
10-19
总结起来，这个案例展示了如何利用jQuery实现鼠标跟随效果，涉及到了DOM操作、事件监听、CSS定位以及动画效果的创建。通过理解这些知识点，开发者可以创建出更多交互性的网页元素，提高用户体验。
节流阀-鼠标跟随效果案例
qq_43781887的博客
09-18 158
就像是游戏发动技能，貂蝉一技能用过之后，没有冷却好的时候要是再点是没有办法触发技能的，而防抖就像回城，可以被打断但是可以重新回城，最后回一次城。节流执行的是触发第一次，而防抖执行的是触发的最后一次。节流策略：顾名思义，可以减少一段时间内事件的触发频率。
鼠标跟随事件实践案例
W_wjinb_B的博客
01-19 465
具体情况：一个图像代替鼠标，类似于QQ农场的铲子，去铲除菜，去播种时，被替代的鼠标 首先，设置图片的样式 <style> img{ position: absolute; top:2px;//很重要 left:2px;//很重要 } </style> 接着，先放逻辑：要用mousemove这个事件，鼠标移动一个像素都会产生一个事件，然后获得x,y的坐标 <img src=???> <script> var pic = document.q
html5 canvas鼠标跟随线条动画特效
06-11
本案例中，“html5 canvas鼠标跟随线条动画特效”是一个利用Canvas API创建的有趣应用，它能够实时追踪用户的鼠标移动，并在Canvas上绘制出变化色彩的线条轨迹。 首先，我们需要理解Canvas的基本结构。在HTML中，...
图片循环自动播放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; //附加事件
js 每隔1秒钟切换一张图片
lcxdawn的博客
11-02 524
需要把图片名字统一成1，2，3，4。
JS上下左右键盘控制图片移动
qq_36401980的博客
04-18 5894
&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
网页图片(图标)鼠标跟随小案例分享
tajia220的博客
07-10 349
http模块: 插入一张图片 <imgsrc="images/xxx.gif"alt=""> css模块: 给图片添加绝对定位 img{ position:absolute; } JavaScript模块: <imgsrc="images/xxx.gif"alt=""> <script> varpic=document.querySelector('...
JavaScript按上下左右键实现图片在网页上的移动
weixin_47982238的博客
08-06 993
<!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 351
onkeydown是Web开发中处理键盘输入的重要工具之一，它提供了实时响应用户键盘操作的能力。
Authorware中制作鼠标跟随动画效果的方法与应用
浅谈Authorware中的鼠标跟随动画效果 本文主要介绍了在Authorware中制作对象跟随鼠标移动的动画效果的方法，并通过案例分析的方式，探究了该动画效果的制作方法，达到灵活应用的目的。 在多媒体作品中，鼠标跟随的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值