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

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

今天有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.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首页圣诞雪花特效特效分享雪花特效下载
sojson 特效,本站面“线条”HTML5实现讲解、特效代码下载
SOJSON动态云端加,HTML5面源码(下载),SOJSON特效
七牛SDK下载地址大全,七牛Java Jar包在线下载
Java 解析JSON,JSON-LIB jar包下载和使用。
关于Java Tomcat 内存溢出排查心得分享
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载
老炮儿下载,天使恶棍下载,终结者5,坏蛋必须死
Javascript模块化编程,本站使用 require.js 优化JS加, require.js下载
SOJSON.COM 站点介绍
最新文章
Macbook teamviewer 突破5分钟,苹果电脑重置 Mac 地址,100%解决限制 219
腾讯云代金券 10000 元/ 30000 代金券领取技巧 321
SEO 换友情链接的主意事项,友情链接断链、友情链接套路说明 229
Springboot + Mybatis,数据库多数据源配置项目Demo【源码下载】 1893
Mac mtr 安装并使用,mrt: command not found 297
Java 集成阿里云消息队列,日志消息存储 497
域名备案注意事项,网站域名ICP备案快速通过攻略【干货分享】 470
Springboot 集成Aliyun MQ消息队列,Aliyun 消息队列配置及代码实现 835
SpringBoot 集成Spring-data-redis,redis对象序列化存储 2025
天气API,全国天气 JSON API接口,可以获取十五天的天气预报 598
最热文章
Elasticsearch教程(四) elasticsearch head 插件安装和使用 126750
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 107841
Elasticsearch教程(六) elasticsearch Client创建 78804
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 74431
Elasticsearch教程(二),IK分词器安装 73210
Elasticsearch教程(一),全程直播(小白级别) 65756
Elasticsearch教程(五) elasticsearch Mapping的创建 61863
Elasticsearch教程(三),IK分词器安装 (极速版) 56355
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 53535
Java 解析JSON,JSON-LIB jar包下载和使用。 48956

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

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

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

支付扫码

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

正在加载... ...