在冬季或者圣诞节之类的节日来临时,想让自己的网站增添一个雪花飘落的动态效果,其实很简单,在网页内插入一段代码就可以实现。
第一种:
演示页面:雪花飘落演示1
代码:(中间随机飘落)
<script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
<script src="https://o.xiezhizhe.com/snowy.js"></script>
<style type="text/css">
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100001;
}
body {
background-color: #000;
}
</style>
<div class="snow-container"></div>
第二种:
演示页面:雪花飘落演示2
代码:(从左向右飘落)
<script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
<script src="https://o.xiezhizhe.com/snowy.js"></script>
<script src="https://o.xiezhizhe.com/Snow.js"></script>
<style type="text/css">
.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
body {
background-color: #000;
}
</style>
<div class="snow-container"></div>
第三种:
演示页面:雪花飘落演示3
代码:(快速随机飘落)
<script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
<script src="https://o.xiezhizhe.com/snowy.js"></script>
<script src="https://o.xiezhizhe.com/Snows.js"></script>
<style type="text/css">
.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
body {
background-color: #000;
}
</style>
<div class="snow-container"></div>
第四种:
演示页面:实体雪花飘落效果
代码:(这个适用于平安夜,圣诞节背景可改,雪花的密度尺寸均可改,简单好用)
<script src="https://o.xiezhizhe.com/jquery-1.8.0.js"></script>
<script src="https://o.xiezhizhe.com/jq.snow.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function(){
$.fn.snow({
minSize: 5, //雪花的最小尺寸
maxSize: 40, //雪花的最大尺寸
newOn: 100 //雪花出现的频率 这个数值越小雪花越多
});
});
</script>
使用说明:
因为需要引入jquery库,为了方便大家的使用,代码内已经使用cdn引入了jquery库和所需要的js文件,所以直接复制代码到自己html页面的head标签内就可以实现相应的雪花飘落效果了。