教你用JavaScript实现鼠标特效
<a name="VL5cN" rel="noopener">
案例介绍
欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用JavaScript编程实战案例,做一个鼠标爱心特效。鼠标在页面移动时会出现彩色爱心特效。通过实战我们将学会createElement方法、appendChild方法、setTimeout方法。
案例演示
页面出现后,鼠标在页面上移动产生彩色爱心特效。
案例设计
JavaScript实战案例-鼠标特效
我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。
其中架构设计包含了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设置爱心显示的间隔。
总结思考
学习点
1、createElement() 方法通过指定名称创建一个元素。
2、appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
3、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
问答
1、setTimeout() 方法指定的是秒数还是毫秒数?
2、createElement() 方法可以通过指定名称来创建一个元素吗?
关注我,跟着我每天学习一点点,让你不在枯燥,不在孤单..
全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信:huodaxia_xfeater
二维码: http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号:有个小院(微信公众号:yougexiaoyuan)
github:yougexiaoyuan (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)
来源:https://www.cnblogs.com/xFeater/p/16999414.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页:
[1]