案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个鼠标爱心特效。鼠标在页面移动时会出现彩色爱心特效。通过实战我们将学会createElement方法、appendChild方法、setTimeout方法。

案例演示

页面出现后，鼠标在页面上移动产生彩色爱心特效。

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看CSS中的核心代码。

@keyframes animate {0% {transform: translate(-50%, -50%);opacity: 1;filter: hue-rotate(0);}100% {transform: translate(-50%, -5000%);opacity: 0;filter: hue-rotate(720deg);}
}

然后我们来编写核心的JavaScript代码，通过offsetX和offsetY获取鼠标位置，在所获得的位置上创建一个span元素，使用random函数生成大小不等的爱心，使用appendChild向body中添加新创建的span元素，使用setTimeout设置爱心显示的间隔。

<script>//有个小院-兴趣编程const bodyEI=document.querySelector("body");
bodyEI.addEventListener("mousemove",(event)=>{const xPos=event.offsetX;const yPos=event.offsetY;const spanEI=document.createElement("span");spanEI.style.left=xPos+"px";spanEI.style.top=yPos+"px";const size=Math.random()*100;spanEI.style.width=size+"px";spanEI.style.height=size+"px";bodyEI.appendChild(spanEI);setTimeout(()=>{spanEI.remove();},3000);});
</script>

总结思考

学习点
1、createElement() 方法通过指定名称创建一个元素。
2、appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
3、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

问答
1、setTimeout() 方法指定的是秒数还是毫秒数？
2、createElement() 方法可以通过指定名称来创建一个元素吗？

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单…

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）

教你用JavaScript制作鼠标特效相关推荐

【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
javascript实例——鼠标特效篇(包含2个实例)
鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小. ...
利用Javascript制作网页特效（时间特效）
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
教你用JavaScript制作背景图像滚动效果
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个背景图像滚动效果.滚动鼠标背景图像缩小,下方滑动出现文字.通过实战我们将学会obj ...
教你用JavaScript制作图片回廊
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个图片回廊.图片展示在页面上,用户可通过按钮手动旋转.通过实战我们将学会事件和Eve ...
用JavaScript制作页面特效
1.Window对象名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息常用方法 prompt():弹出输入框 ...
使用JavaScript制作页面特效2
1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...
利用Javascript制作网页特效（图像特效）
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...
用javaScript制作爱心特效
爱心特效源代码 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

教你用JavaScript制作鼠标特效