4月30日，（每日一练）Javascript案例，鼠标跟随炫彩特效

鼠标在页面移动的同时，生成炫彩小球移动，生成的位置跟随鼠标位置，并在一段时间后，小球消失，类似特效：具有鼠标高光提示位置功能的运用。

建议小伙伴们先自行尝试，

提示：绑定鼠标监听用client索取鼠标位置，动态生成小球（div border-radius = 50%）

利用定时器，按你喜欢的帧率（ms）更新小球的状态，颜色，显示程度！

本文重难点：

1、如何在生成小球的同时不造成内存的大量占用（仔细思考！在今后学习工作都很重要）

2、定时器的运用，以及update更新函数的书写

练习本文之前必会知识：构造函数以及new一个实例的写法及运用，dom的运用

现在给你15分钟时间尝试书写代码

---------分割线----------

--------------------------------------------------------------------------------------------------------------

时间到！

如果你成功写出大概特效，那么，恭喜你通过了今天的每日练习！

如果没有写出，也不要灰心，接下来看看我的解答。

<!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>
</head>
<style>body {background-color: black;}.ball {position: absolute;border-radius: 50%;}
</style><body><script>//创建小球类function Ball(x, y) {//x,y表示圆心this.x = x;this.y = y;this.r = 20;this.opacity = 1;this.color = colorArr[parseInt(Math.random() * colorArr.length)];// 这个小球的x增量和y的增量，使用do while语句，可以防止dX和dY都是零do {this.dX = parseInt(Math.random() * 20) - 10;this.dY = parseInt(Math.random() * 20) - 10;}while (this.dX == 0 & this.dY == 0)//初始化this.init();ballArr.push(this);};//初始化方法Ball.prototype.init = function () {//创建自己的domthis.dom = document.createElement('div');this.dom.className = 'ball';this.dom.style.width = this.r * 2 + 'px';this.dom.style.height = this.r * 2 + 'px';this.dom.style.left = this.x - this.r + 'px';this.dom.style.top = this.y - this.r + 'px';this.dom.style.backgroundColor = this.color;//孤儿节点需要上树document.body.appendChild(this.dom);};//更新Ball.prototype.update = function () {//位置改变this.x += this.dX;this.y += this.dY;//半径改变this.r += 0.2;//透明度改变this.opacity -= 0.01;this.dom.style.width = this.r * 2 + 'px';this.dom.style.height = this.r * 2 + 'px';this.dom.style.left = this.x - this.r + 'px';this.dom.style.top = this.y - this.r + 'px';this.dom.style.opacity = this.opacity;//防止大量内存占用！小球需要检索并删除！// 当透明度小于0的时候，就需要从数组中删除自己，DOM元素也要删掉自己if (this.opacity < 0) {// 从数组中删除自己for (var i = 0; i < ballArr.length; i++) {if (ballArr[i] == this) {ballArr.splice(i, 1);}}// 还要删除自己的domdocument.body.removeChild(this.dom);}}// 把所有的小球实例都放到一个数组中var ballArr = [];// 初始颜色数组var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666','#CC3399', '#FF6600'];// 定时器，负责更新所有的小球实例setInterval(function () {// 遍历数组，调用调用的update方法for (var i = 0; i < ballArr.length; i++) {ballArr[i].update();}}, 20);// 鼠标指针的监听document.onmousemove = function (e) {// 得到鼠标指针的位置var x = e.clientX;var y = e.clientY;new Ball(x, y);};</script>
</body></html>

（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge相关推荐

Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: < ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
WEB前端整套教程html+divcss+javascript+jquery+html5-孙琪峥-专题视频课程
WEB前端整套教程html+divcss+javascript+jquery+html5-8598人已学习课程介绍内容会包含html.div+css.JavaScript.jque ...

（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge

4月30日，（每日一练）Javascript案例，鼠标跟随炫彩特效

（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge相关推荐

最新文章

热门文章