jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享


Posted in Javascript onAugust 20, 2015

这是一款基于jquery实现的漫天雪花飞舞的圣诞祝福雪花效果代码,雪花的大小可以进行切换,用户还可以更改背景图片,是一款非常实用的幻灯片特效源码。

漫天雪花飞舞的jquery圣诞祝福雪花效果,集中不同的效果可以点击选择,请欣赏。

效果演示 源码下载(浏览器中如果不能正常运行,可以尝试切换浏览模式或者选择直接下载)

 jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

 为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码如下

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="images/jquery-latest.min.js"></script>
 <script src='images/snowfall.jquery.js'></script>
 <link rel="stylesheet" href="images/styles.css"></link>
</head>
<body class="darkBg">
 <input type="button" id="clear" value="Click to clear"/>
 <input type="button" id="round" value="Rounded"/>
 <input type="button" id="shadows" value="Shadows"/>
 <input type="button" id="roundshadows" value="Rounded Shadows"/>
 <input type="button" id="deviceorientation" value="Deviceorientation"/>
 <div class="collectonme">
 <p>Collect on meeeeee!!!</p>
 </div>
 <div class="collectonme">
 <p>Collect on meeeeee!!!</p>
 </div>
 <div class="collectonme">
 <p>Collect on meeeeee!!!</p>
 </div>
</body>
 <script type='text/javascript'> 
 $(document).ready(function(){
 $('.collectonme').hide();
 //Start the snow default options you can also make it snow in certain elements, etc.
 $(document).snowfall();
 
 $("#clear").click(function(){
 $(document).snowfall('clear'); // How you clear
 });
 
 $("#round").click(function(){
 document.body.className = "darkBg";
 $('.collectonme').hide();
 $(document).snowfall('clear');
 $(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded
 });
 
 $("#shadows").click(function(){
 document.body.className = "lightBg";
 $('.collectonme').hide();
 $(document).snowfall('clear');
 $(document).snowfall({shadow : true, flakeCount:200}); // add shadows
 });

 $("#roundshadows").click(function(){
 document.body.className = "lightBg";
 $('.collectonme').hide();
 $(document).snowfall('clear');
 $(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows
 });
 
 

 $("#deviceorientation").click(function(){
 $(document).snowfall('clear');
 $('.collectonme').hide();
 document.body.className = "darkBg";
 $(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8});
 });

 });
 </script>

<p align="center"><font color="#FFFFFF">来源:</font><a href="https://3water.com/" target="_blank"><font color="#FFFFFF">三水点靠木</font></a></p>
</html>

以上就是为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
js实现网页多级级联菜单代码
Aug 20 #Javascript
javascript常用的方法整理
Aug 20 #Javascript
JS实现的Select三级下拉菜单代码
Aug 20 #Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
You might like
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
js特殊字符转义介绍
2013/11/05 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python itertools.product方法代码实例
2020/03/27 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
工程监理应届生求职信
2013/11/09 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
学术会议邀请函范文
2014/01/22 职场文书
教师评语大全
2014/04/28 职场文书
七年级英语教学反思
2016/02/15 职场文书
初中物理教学反思
2016/02/19 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书