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

soゝso 2016-12-26 22:13:21 4412

今天有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("//cdn.www.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.www.sojson.com/js/festival/christmas/img/background.jpg?imageView2/2/w/'+ width +'")','background-attachment':'fixed'});
	}
});

下载特效源码见附件。

版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/204.html

转载时必须以链接形式注明原始出处及本声明。


附件下载:

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

本文主题:

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

关于作者
一个低调而闷骚的男人。
相关文章
sojson 特效,本站面“线条”HTML5实现讲解、特效代码下载
SOJSON动态云端加,HTML5面源码(下载),SOJSON特效
json-lib 的 maven dependency 引入及Jar包下载
各种Editor对比,我选择wangEditor,wangEditor下载
网站面添加 Google AdSense 后面加慢?
IP定位,腾讯定位周边数据分享
Java 解析JSONJSON-LIB jar包下载和使用。
Mac Fidder 抓包替代方案 Charles-proxy 抓包工具下载 + 安装 + 破解 charles.jar 下载
老炮儿下载,天使恶棍下载,终结者5,坏蛋必须死
谈谈这次对 SOJSON 的改版
最新文章
Java JSON 组件选型之 FastJson 为什么总有漏洞? 58
使用七牛云存储实现图片API,自动删除图片方案合集 1341
神速ICP备案经验分享,ICP备案居然一天就通过了 2350
百度加强推送URL链接,百度SEO强行推送链接JavaScript代码案例讲解。 2992
SOJSON 拓展服务器被DDos攻击了一晚上,是如何解决的? 3372
湖南地区备案“新增网站需提交组网方案或解释说明”,关于备案做简单叙述 3467
企查查你是个什么企业,骗子的帮凶,诈骗的集中营,通过企查查骚扰企业电话不断,为所欲为的企查查 9780
Java爬取百度云观测对网站的检测数据,获取子域名及域名的安全信息 2580
【2020年】百度搜索词获取,获取百度搜索的关键词【真实有效】 7277
Nodejs环境安装,Nodejs环境安装一篇就够了 1827
最热文章
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 434151
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 418911
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 351532
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 314395
免费天气API,天气JSON API,不限次数获取十五天的天气预报 289596
Elasticsearch教程(四) elasticsearch head 插件安装和使用 222426
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 180020
谈谈斐讯路由器劫持,你用斐讯路由器,你需要知道的事情 136699
Elasticsearch教程(一),全程直播(小白级别) 119973
Elasticsearch教程(五) elasticsearch Mapping的创建 99219

骚码加入我们 / 千人QQ群:259217951

入群需要5元为的是没有垃圾广告,如果没有QQ钱包,可以加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...