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 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
jsonp跨域请求详解
Jul 13 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
关于Vue中的options选项
Mar 22 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
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使用百度天气接口示例
2014/04/22 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
八年级音乐教学反思
2014/01/09 职场文书
公司管理制度范本
2015/08/03 职场文书
导游词之南京中山陵
2019/11/27 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记