分享两种圣诞节雪花特效JS代码(网站下雪效果)

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]

想让你的网站更炫吗,那就给你的网站添加一个下雪代码吧!

测试了网上找的几个代码,下面分享一下我个人比较满意的2种。

看代码之前,先分享一下即时预览的方法:很简单,在webkit浏览器(比如谷歌)按下F12,然后在console里面粘贴一下JS代码(不含前后的script标签),然后回车执行即可看到效果了。

下雪特效代码①

直接将以下代码添加到footer文件</body>之前即可:

<script type="text/javascript" src="http://7xkigi.com1.z0.glb.clouddn.com/snow.js"></script>
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;" class="snow-container"></div>

查看实际网页效果 点击前往

下雪特效代码②

<script type="text/javascript">
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('body').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color: options.flakeColor
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定义雪花最小尺寸 */
	    maxSize: 50,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度,数字越小越密集 */
    });
});
</script>

特效代码②使用方法:

  • 方法1:复制以上JS代码,粘贴到网站</body>标签之前即可;
  • 方法2:去掉代码前后的<script **>标签,然后将代码保存为js文件,最后在网站引用即可。
  • Ps:若没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可。

代码添加后,你的网站上将飘满不一样的雪花,很酷吧,赶快添加试试吧!

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> 分享两种圣诞节雪花特效JS代码(网站下雪效果)”。在页面右边可以分享本文哦!

有 1 发吐槽 关于 “分享两种圣诞节雪花特效JS代码(网站下雪效果)

  1. 沙发
    zous 2016-01-24
    还是有稍微影响的 你主题可以分享么

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

分享两种圣诞节雪花特效JS代码(网站下雪效果)
6 票, 5.00 平均等级 ( 99% 分 )