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 相关文章推荐
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 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
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python定时器实例代码
2017/11/01 Python
用Eclipse写python程序
2018/02/10 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python如何实现线程间通信
2020/07/30 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
经销商会议欢迎词
2014/01/11 职场文书
校庆团日活动总结
2014/08/28 职场文书
坎儿井导游词
2015/02/09 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python