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对select操作小结(遍历option,操作option)
Jul 04 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
js代码实现微博导航栏
2015/07/30 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Node.js简单入门前传
2017/08/21 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Python-嵌套列表list的全面解析
2016/06/08 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
解决python 上传图片限制格式问题
2019/10/30 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
《二泉映月》教学反思
2014/04/15 职场文书
捐书活动总结
2014/05/04 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技