技术博客

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

信息发布:soゝso 发布日期:2016-12-26 22:13 热度:993 分享到:

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

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

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

效果预览链接:http://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("//cdn.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("//cdn.sojson.com/js/festival/christmas/img/background.jpg?imageView2/2/w/'+ width +'")','background-attachment':'fixed'});
	}
});

下载特效源码见附件。

附件下载

jQuery-sojson特效.zip

备注:点击文件名下载,附件源来自云端,只能在本站下载。复制下载链接无效。

本文主题

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

¥我需要走的更远,点击我 赞助。 如果还有疑问,点击我加群,为你提供最好的解答。


工具导航地图