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 相关文章推荐
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
基于JavaScript实现省市联动效果
Jun 22 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实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
JS获取html对象的几种方式介绍
2013/12/05 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python修改操作系统时间的方法
2015/05/18 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
用python对excel查重
2020/12/07 Python
Spy++的使用方法及下载教程
2021/01/29 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
党员政治学习材料
2014/05/14 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
房产分割协议书范文
2014/11/21 职场文书
活动经费申请报告
2015/05/15 职场文书
2016年员工年度考核评语
2015/12/02 职场文书