纯JavaScript实现鼠标拖尾效果
1.前言
鼠标拖尾在浏览器上实现,是一种非常有趣,且简单的实现。它作为js编译出来的功能,极好的加深了用户与页面之间的交互性,提高了用户体验。是一种简单的功能实现,书写难度低,非常适合萌新小白作为前端入门练习的首选之一。
2.需求
1.在相应的页面之中能够实现某个元素对鼠标的跟随
2.在html代码中只生成一个元素
具体实现效果图如下:
鼠标拖尾演示
5.代码
<script>let img = document.createElement('img');document.body.appendChild(img); // 添加子元素class Round {constructor(left, top) {this.left = left;this.top = top;}create() {img.style.cssText = `width:50px;height:50px;position:absolute;left:${this.left}px;top:${this.top}px;`;img.src = "./1.jpeg";}}document.onmousemove = function (e) {let left = e.clientX,top = e.clientY;let obj = new Round(left, top);obj.create();// console.log(left,top);}</script>
6.详解
1.首先我们必须知道的是,这种拖尾效果跟随鼠标的到底是什么东西?肯定是一个标签,一个元素。我们都知道,元素在创建完了之后,写好样式了之后才会在浏览器中有所展示。
2.所以,怎么才能让这个元素移动起来呢?如果我在css
书写一个 margin-left:20px; 那么这个元素就会朝浏览器的右移动20个像素。
好像通过修改css
中的margin
值就可以实现元素的移动了。可是怎么将这种移动的方式和我们的鼠标移动的事件产生绑定的关系呢?这个时候就要用到clientX/Y
了,这句代码什么意思?意思就是获取当前鼠标到浏览器内容区域的x坐标,y同理。
3.当我拿到鼠标移动路径上的x,y坐标后,将元素的移动的距离修改为鼠标移动路径的x,y值就可以实现拖尾效果了。但只写成这样是存在bug的,因为你通过margin
的方式进行移动时,如果当前页面存在其他元素时,就会出现问题,很显然这不是我们想要的效果。
4.那么有没有一种方法可以让我当前想要跟随鼠标移动的这个元素在跟随鼠标的移动的同时,又不影响其他html中的元素工作呢?举个例子,假如说我html中书写的代码在第一层,我能不能通过某个方法或者说css
样式将这个元素置于顶层呢?
5.有的,那就是position
,一句话“父相子绝”,当前页面中只有我们在script
中创建的元素,所以这个元素就是子元素,body
就是父元素,在这里我们只需要给子元素一个position:absolute;
让目标元素脱离文档流,就可以实现跟随效果啦,并且也不会和html中的其他元素打架啦!
7.总结
通过这种方法,我们可以实现不同的效果,不光是鼠标拖尾效果,甚至是烟花样的点击效果,或者说是波纹样的点击效果...都是可以实现的。
纯JavaScript实现鼠标拖尾效果相关推荐
- 纯js实现鼠标拖尾效果(好玩又简单,一学就会)
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...
- JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果 前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
- html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
- 游戏中实现鼠标拖尾效果
游戏中使用Trail Renderer这个通过设置参数来实现拖尾效果,通过在update中吧鼠标的点击的路径给怪哉这个得物体. 转载于:https://www.cnblogs.com/qinshuai ...
- html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
- html鼠标拖尾效果,Canvas实现特效(一):粒子拖尾
粒子特效 效果: 作一新求抖直微圈 先图 一框发互会理工.择各近些架现跳轻机审蓝器 为了实现粒子在运动轨迹上所留下的尾巴效果,在网上看见有一位网友是在上一帧的基础之上,加上了一层半透明蒙层.也就是rg ...
- Ue4制作鼠标拖尾效果
开启UE中的Niagara UI Renderer插件(所有兼容这个插件的UE版本中都有自带,如果没有可以去下载,免费的) 2.根据图提示,新建一个UI例子特效,用来作为拖尾 3.新建一个UMG,创建 ...
- html鼠标拖尾效果,JavaScript鼠标划过背景拖尾效果
JavaScript鼠标划过残影效果 body{ margin:0px; padding:0px; background-color:#000; } .container a{ display:inl ...
- 纯原生 js 简易 实现 鼠标拖尾效果
实现效果:可以随机生成大小不同 颜色不同的圆 随后消失 效果视频 鼠标跟随效果 JS部分 <script>document.onmousemove = function(event) {/ ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
最新文章
- UNIX网络编程--ioctl操作(十七)
- vs2013编译 protoBuffer编译出现的问题
- python语句讲解_python语句讲解_python语句讲解
- Linux环境搭建 | 手把手教你配置Linux虚拟机
- MATLAB 求图像的极大值极小值,平均值
- c语言中gets函数可以输入空格吗_C语言中scanf()与gets()函数的区别,哪一个可以读入空格啊?...
- 高性能Javascript 用局部变量缓存集合元素
- [人生百态]爱的样子
- 谈谈枚举和 那啥 那啥来着 哦 对对对 泛型!
- SpringMVC 拦截器实现
- Linux定时器的简单使用
- MDClub 轻量级网论坛源码
- 00001__伊丽莎白福尔摩斯
- 什么是内存对齐以及作用
- SQL DROP TABLE语句概述
- CryEngine 动态添加模型
- git merge 冲突解决
- 【枚举的定义;枚举变量的定义、初始化和赋值】(学习笔记16--枚举)
- 【NIPS 2017】PointNet++:度量空间中点集的深层次特征学习
- flex布局的应用 —— 模仿携程移动端的首页