3.28尾随鼠标

最新推荐文章于 2024-09-02 20:34:02 发布
最新推荐文章于 2024-09-02 20:34:02 发布
阅读量109 收藏
点赞数
分类专栏： 编程 JavaScript #Html 文章标签： css3 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_tuohai/article/details/123768264
版权
本文介绍了如何创建一个尾随鼠标的图片效果。首先在HTML中添加img标签，然后通过CSS设置图片的相对定位。接着使用JavaScript获取图片元素，并定义函数处理鼠标移动事件。通过event.pageX和event.pageY获取鼠标坐标，动态调整图片的top和left值，使图片跟随鼠标移动。最终实现了在不同浏览器中兼容的尾随鼠标效果。
摘要由CSDN通过智能技术生成
  1. 首先创建一个新的html，在body下面写入img照片标签，输入好标签后，然后在标签内选取你要尾随鼠标键的图片
    在这里插入图片描述
  2. 选取好了照片之后，我们就可以设置该图片的样式，这里的话比较简单，我们只需要给图片img设置定位就可以了，定位设置相对定位或者决定定位都可以，为了方便简介一点呢我们可以直接用img标签而不用在img后面加个类标签什么的，那就会显得比较麻烦
    在这里插入图片描述
  3. 这时候我们的css样式和源代码已经完成了，接下来就到我们写js的时候了，虽然有点难，只要理解了意思，那就没什么问题，首先，我们在源代码结尾写入script的标签，标签意思就是内联js，
    在这里插入图片描述
  4. 插入完js之后，我们就可以开始写js代码了，首先我们声明一个变量为img，然后获取到文档中所有包含img标签的内容，因为我们只有一个img所以用这个query selector会比较方便一点，或者通过id获取id元素getelement也是可以的
最低0.47元/天 解锁文章
A_tuohai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3.28
03-29
3.28 #define _CRT_SECURE_NO_WARNINGS 1 //关键字typedef //3.28 // int main（）// {// // typedef-类型定义-类型重定义// typedef unsigned int u_int; // unsigned int num = 20; // u_int num2 = 20; //返回0...
鼠标跟随
qq_35930059的博客
11-28 216
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0;
AS2.0鼠标尾随和拖动代码
weixin_33895604的博客
07-11 272
1，鼠标尾随。 a： Mouse.hide();//隐藏鼠标。Mouse.show()显示鼠标。 MC1.startDrag(true);//直接利用函数实现。 b： Mouse.hide(); onEnterFrame=function(){//坐标赋值实现 MC1._x=_xmouse;//鼠标坐标赋值给MC1。 MC1._y=_ymouse; } ...
纯JavaScript实现鼠标拖尾效果
Chanyto的博客
08-20 1330
鼠标拖尾在浏览器上实现，是一种非常有趣，且简单的实现。它作为js编译出来的功能，极好的加深了用户与页面之间的交互性，提高了用户体验。是一种简单的功能实现，书写难度低，非常适合萌新小白作为前端入门练习的首选之一。通过这种方法，我们可以实现不同的效果，不光是鼠标拖尾效果，甚至是烟花样的点击效果，或者说是波纹样的点击效果...都是可以实现的。
鼠标跟随特效
神以灵的博客
03-31 5149
今天访问stack-overflow看到了愚人节的彩蛋，感觉这个鼠标跟随特效很好玩，就把源码拔了下来~~ 这是它的codepen地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w...
纯 CSS 实现鼠标跟随效果
Jerome的博客
06-16 3876
欢迎微信关注Jerome blog，用技术的心去生活
CMake-3.28.3安装包
03-15
在给定的“CMake-3.28.3安装包”中，包含了适用于Windows x86_64架构的CMake版本，这是对软件开发人员非常重要的工具，特别是对于那些处理多平台项目或者需要管理复杂依赖关系的开发者。 CMake的主要特点包括： 1....
FileZilla 3.28
12-08
FileZilla 3.28 win 64 setup for windows 7 windows xp windows 10
CSS3动画——飞行的小精灵
懒羊羊大王的博客
08-25 2460
通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
CSS3中display显示属性
业精于勤荒于嬉，行成于思毁于随
08-28 728
设为none，全都消失，位置也不占，visibility为hidden消失了，但是还占位置。
CSS3多行多栏布局
业精于勤荒于嬉，行成于思毁于随
08-24 730
当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。
【CSS】如何写渐变色文字并且有打光效果
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
09-02 489
效果如上，其实核心除了css的，还有就是打光效果，原理其实就是两块遮罩，如下👇。
CSS3文本属性详解
业精于勤荒于嬉，行成于思毁于随
09-02 823
想缩进段落，幂指数，标题字符增加间距，要用到文本属性。
CSS中禁用DOM事件
bingmoujs的博客
08-26 953
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
CSS学习9
最新发布
qq_54641174的博客
09-02 946
盒子模型--内容高宽，盒子布局，盒子阴影
前端代码注释风格 - CSS篇
yangguangxiadewo的专栏
09-02 513
本文基于《阿里巴巴CSS编程规约》、stylelint rules进行编写，涉及预编译语言（Sass、Less）的编码风格和最佳实践。
html,css学习记录
2301_79347603的博客
09-01 1559
html,css学习记录htmlcss盒子模型 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mykingdom</title> <link
Red Hat Linux 3.28：设置Root密码与分区指南
无论哪种方式，安装过程中都会对安装盘进行检测，并让用户选择系统语言、键盘布局和鼠标类型。 在确定安装类型时，通常有自定义手动分区和自动分区两种选择。手动分区允许用户精确控制硬盘空间的分配，对于高级用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值