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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
js运动事件函数详解
Oct 21 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
js正则表达式简单校验方法
Jan 03 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
js微信分享API
2020/10/11 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python中global与nonlocal比较
2014/11/21 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
请说出以下代码输出什么
2013/08/30 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
装饰活动策划方案
2014/02/11 职场文书
社区母亲节活动记录
2014/03/06 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
金融保险专业求职信
2014/09/03 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
倡议书格式及范文
2015/04/29 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL