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增加join方法的实现代码
Nov 28 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
jquery图片切换插件
Mar 16 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 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 register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python中print和return的作用及区别解析
2019/05/05 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
python实现FTP循环上传文件
2020/03/20 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
两只小狮子教学反思
2014/02/05 职场文书
《手指教学》反思
2014/02/14 职场文书
英文请假条
2014/04/11 职场文书
食品安全责任书
2014/04/15 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2014年创卫工作总结
2014/11/24 职场文书
爱的承诺书
2015/01/20 职场文书
关于长城的导游词
2015/01/30 职场文书
2015暑假假期总结
2015/07/13 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript