使用css和js实现鼠标拖尾特效

一实现步骤解析：

1.这原本是一个鼠标后面跟随一串英文字母的效果，
2.后来我就想，运用随机数字母的颜色做成彩色的，
3.并且每一个字母的色彩是随机分配而不是我自己手动填写的。

二 css：

1.为js创建的div设置样式css： position: absolute; js： newEle.style.left = (event.clientX + 10) + “px”; newEle.style.top = (event.clientY + 10) + “px”; 会根据鼠标的位置显示字符串。
2. -moz-user-select: none; -khtml-user-select: none; user-select: none; 将div设置鼠标不可选择（不设置该属性，会对点击事件造成影响）

<style type="text/css">div{position: absolute;width: 1em;height: 1em;display: block;-moz-user-select: none;-khtml-user-select: none;user-select: none;}
</style>

三 js：

1.var coor = “rgb(” + Math.floor(Math.random() * 256) + “,” + Math.floor(Math.random() * 256) + “,” + Math.floor(Math.random() * 256) + ")"生成随机颜色；
2.其代码核心是 Math.floor(Math.random()*255) 这句，他获取到的是0-255之间的任意一个值；
3. 然后把r,g,b三个值分别用这句代码代替，凑成一个整的颜色值字符串赋给变量，最后弹出就ok了。
4. onmousemove函数中，是当鼠标有移动的时候会发生的事情；
5.本来i的for循环是在这个函数的外边的，我为了让字母可以随时随地换随机颜色，就把他放进了鼠标事件里边，每当鼠标移动一次，就从新调用一个颜色值，这样就会在鼠标移动的时候变颜色了；
6.一开始只添加window.setInterval()函数，使拖尾的字母逐渐消失： * var setInterval = window.setInterval(function() { if (opacity <= 0) { window.clearInterval(setInterval); } else { opacity = (opacity - 0.1); newEle.style.opacity = opacity; } }, 100) 之后发现页面上会出现大量div在页面上，导致拖尾效果变慢，随后加入了：newEle.remove()；用于每次透明的度消失后直接移除元素。

<script type="text/javascript">window.onmousemove = function(event) {var arr = ForATOOChar();//随机出0-15的数字var randomNum = Math.floor(Math.random() * 0x10);//随机出字体颜色var coor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";//创建元素跟随鼠标var newEle = document.createElement("div");newEle.innerText = arr[randomNum];document.body.appendChild(newEle)newEle.style.left = (event.clientX + 10) + "px";newEle.style.top = (event.clientY + 10) + "px";newEle.style.color = coor;var opacity = parseFloat(1);var toppx = (event.clientY + 20);// 设置一秒逐渐消失var setInterval = window.setInterval(function() {if (opacity <= 0) { window.clearInterval(setInterval); newEle.remove(); } else {opacity = (opacity - 0.1);newEle.style.opacity = opacity;}}, 100)}//循环输出A-O字母function ForATOOChar() {var charArr = [];for (var i = 0; i < 17; i++) {charArr[i] = String.fromCharCode((65 + i))}return charArr;}</script>

四实现效果：

使用css和js实现鼠标拖尾特效相关推荐

使用css和js实现鼠标拖尾特效（七彩泡泡）
( 此文章是转载,由于急于使用忘记作者链接.作者看到后可提供出处.) 一 css样式 <style>*{margin:0;padding:0;}body{overflow:hidden;} ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...
用js编写,鼠标拖拽特效。
盒子的位置(left和top值)= 鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left和top值). 编写HTML,设计弹框用于实现拖拽特效. 为拖拽条添加mousedown事件 ...
javascript鼠标拖尾特效
鼠标特效需要使用定时器setTimeout在固定时间生成节点,删除节点,生成的节点赋予随机的宽高,随机颜色,使每个特效节点都看起来不一样注意:生成的节点需要设置绝对定位,使其脱离文档流,不影响页面中 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效（富文本编辑器）
特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段 ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
processing制作熊猫头像跟随鼠标拖尾
先上效果图: 我演示时电脑有点卡所以看着有些顺畅,你的电脑应该是没有问题的. processing实现跟随鼠标拖尾其实不难,在这篇文章中我将介绍图案封装.封装图案整体缩放.数组的创建方法以及一些逻辑处 ...
python-tkinter（7）实现各种个样的撩妹鼠标拖尾
python-tkinter(7) 实现各种个样的撩妹鼠标拖尾系统的拖尾已经无法满足我们了,女朋友叫你把鼠标拖尾换成她的照片,让你时时刻刻都可以看见她,这个要求你答不答应. 当然,这个要求还是可以满 ...

使用css和js实现鼠标拖尾特效

使用css和js实现鼠标拖尾特效相关推荐

最新文章

热门文章