SOJSON首页的圣诞雪花特效，特效分享，雪花特效下载

JSON 2016-12-26 22:13:21 6541

今天有N多同学私聊我，我以为是干嘛。原来是问这个首页的圣诞特效怎么实现的，我一般都是拿来主义，也是在网上找的，有的时候会改动改动。比如说这个圣诞特效，我是小改动了自适应系统的分辨率。没有原图，要不然这个特效会更好。

下面来看圣诞雪花特效图片：

雪花飘零的效果看图看不出来。可以自己试试下面的代码，或者附件。

效果预览链接：https://www.sojson.com/demo/christmas/index.html

下面看使用特效的代码：

引入2个JS，因为是依赖 jquery ，所以需要一个 jquery 。

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/christmassnow.js"></script>

//取到桌面分辨率宽度
var width = window.screen.width;
$('body').css({'background-image':'url("//file.sojson.com/js/festival/christmas/img/background.jpg?imageView2/2/w/'+ width +'")','background-attachment':'fixed'});
so('body').attr('festival','christmas');
$(document).ready(function() {
	$('body').christmassnow({
		snowflaketype: 23, // 1 to 25 types of flakes are available change the number from 1 to 25. each one contain different images.
		snowflakesize: 2, //snowflakesize is 1 then it get the size of the image as random , if the snowflakesize is 2 means size of the image as custom
		snowflakedirection: 1, // 1 means default no wind (top to bottom), 2 means random, 3 means left to right and 4 means  right to left
		snownumberofflakes: 4, // number of flakes is user option
		snowflakespeed:2, // 雪花飘动的速度，值越小下落的越快
		flakeheightandwidth: 30 // 控制雪花的尺寸
	});
});
var _b = $('#christmas'),close_christmas =$('.close_christmas');
close_christmas.removeClass('none');
if(_b && _b.length){
	close_christmas.text('关闭圣诞特别版');
	setTimeout(function(){
		layer.tips('点我=>关闭圣诞特别版主题 ^_^', close_christmas, {tips: [2, '#78BA32']});
	},2000);
}else{
	close_christmas.text('开启圣诞特别版开启圣诞特别版');
	setTimeout(function(){
		layer.tips('点我=>开启圣诞特别版主题 ^_^', close_christmas, {tips: [2, '#78BA32']});
	},2000);
}
//绑定关闭和开启特效
$('.close_christmas').click(function(){
	var _b = $('#christmas');
	if(_b && _b.length){
		$('body').v('id','0');
		close_christmas.text('开启圣诞特别版');
		$('body').v('style','overflow-x: hidden');
	}else{
		$('body').v('id','christmas');
		close_christmas.text('关闭圣诞特别版');
		$('body').css({'background-image':'url("//file.sojson.com/js/festival/christmas/img/background.jpg?imageView2/2/w/'+ width +'")','background-attachment':'fixed'});
	}
});

下载特效源码见附件。