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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
javascript修改图片src的方法
Jan 27 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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实现与ASP Banner组件相似的类
2006/10/09 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
JS实现星星海特效
2019/12/24 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
旅游项目开发策划书
2014/01/18 职场文书
大二自我鉴定
2014/01/31 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
党支部半年考察意见
2015/06/01 职场文书
长征观后感
2015/06/09 职场文书
大学生创业计划书
2019/06/24 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
vue中div禁止点击事件的实现
2022/04/02 Vue.js
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技