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的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
js脚本实现数据去重
2014/11/27 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python 如何将office文件转换为PDF
2020/09/22 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书