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使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
如何提高数据访问速度
Dec 26 Javascript
js实现下拉菜单效果
Mar 01 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JS实现瀑布流效果
Mar 07 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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简单获取目录列表的方法
2015/03/24 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
详解python中的线程与线程池
2019/05/10 Python
Python进行统计建模
2020/08/10 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
公务员培训心得体会
2013/12/28 职场文书
十八届三中全会感言
2014/03/10 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2014企业年终工作总结
2014/12/23 职场文书
病假条格式范文
2015/08/17 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
Python 绘制多因子柱状图
2022/05/11 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang