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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery中remove()方法用法实例
2014/12/25 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue实现购物车的监听
2020/04/20 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python的mysqldb安装步骤详解
2017/08/14 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
迟到检讨书900字
2014/01/14 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
群众路线表态发言材料
2014/10/17 职场文书
异地恋情人节寄语
2015/02/28 职场文书
教师节随笔
2015/08/15 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js