JavaScript实现雪花飘落效果特效

发布时间:2023-1-03 09:46

没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽。雪,是冬天的灵魂,为大地铺好背景,之后发生的都如梦似幻,就像童话般的存在。冬天没有雪,能难倒程序猿吗,没有雪自己造,这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; } </style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script> function snow() { 
//1、定义一片雪花模板 
var flake = $("<div>").css({ "position": "absolute", "color": "#fff" }).html("❄"); 
//获取页面的宽度,利用这个数来算出,雪花开始时left的值 
var documentWidth = $(document).width(); 
//获取页面的高度 相当于雪花下落结束时Y轴的位置 
var documentHieght = $(document).height(); 
//定义生成一片雪花的毫秒数 
var millisec = 100; 
//2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花; 
setInterval(function() { 
//随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置 
var startLeft = Math.random() * documentWidth; 
//随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置 
var endLeft = Math.random() * documentWidth; 
//随机生成雪花大小 
var flakeSize = 5 + 20 * Math.random(); 
//随机生成雪花下落持续时间 
var durationTime = 4000 + 7000 * Math.random(); 
//随机生成雪花下落 开始 时的透明度 
var startOpacity = 0.7 + 0.3 * Math.random(); 
//随机生成雪花下落 结束 时的透明度 
var endOpacity = 0.2 + 0.2 * Math.random(); 
//3、克隆一个雪花模板,定义雪花的初始样式,拼接到页面中 
flake.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ 
//执行动画 
"left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { 
//4、当雪花落下后,删除雪花。 
$(this).remove(); 
});
}, millisec); 
}; 
snow(); 
</script>
</body>
</html>
深入理解JavaScript中实例对象和new命令 网站建设

深入理解JavaScript中实例对象和new命令

面向对象编程(Object Oriented Programming,缩写为OOP)是目前主流的编程范式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟...
浅析JavaScript中五种模块系统的使用 网站建设

浅析JavaScript中五种模块系统的使用

模块系统是什么?简单来说,其实就是我们在一个文件里写代码,声明一些可以导出的字段,然后另一个文件可以将其导入并使用。 模块化的优点: 文件里声明的变量会被隔离,不会暴露到全局,可以有效...