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="http://www.jb51.net/" target="_blank"><font color="#FFFFFF">我们</font></a></p>
</html>

以上就是为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码，希望大家可以喜欢。

赞 (0)

相关推荐

  • Android 炫舞漫天飞雪效果图

    Android 炫舞漫天飞雪效果图

    今天周日,不适合出门,太冷了,俗说:一九二九不出手,三九四九零来走.. 我们的应用也可以有一些冬天的效果, 教大家做一个下雪的动画效果, 参考. 主要 (1) 隐藏status bar, 全屏显示图片. (2) 绘制多个点, 实现移动效果. (3) 回收点, 避免重复创建. 我喜欢用注释说话, 请大家多关注代码中的注释. Github下载地址 1. 雪花类 雪花的属性包含: 随机量, 位置, 增量, 大小, 角度, 画笔. 绘画的过程中, 使用角度会移动点的位置, 每次速率都不同. 当雪花移出屏

  • js实现飞入星星特效代码

    本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css"> <!-- body { background-color: #000066; } --> </style> </head> <body> <scr

  • js星星评分效果

    html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"></li> <li rel="3" title="一般般,给3分

  • js点亮星星评分并获取参数的js代码

    js点亮星星评分并获取参数的js代码

    用到的图片如下: 在线演示地址:http://demo.jb51.net/js/2014/jsxxdf/demo2.html 完整代码: 网页特效 添加行为的星星评级效果 我们欢迎您. 我们,站长必备的高质量网页特效和广告代码. 服务 default level 1 2 3 4 5 价格 default level 1 2 3 4 5 质量 default level 1 2 3 4 5 0){ a_obj[0].onclick=function(){ return give_value(thi

  • js实现漫天星星效果

    js实现漫天星星效果

    本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script ty

  • Android仿开心消消乐大树星星无限循环效果

    Android仿开心消消乐大树星星无限循环效果

    啥都不说先上效果图,这个是我项目里的效果: 下面的是我抽取出来的 demo 适配啥的我基本上都做好了没做其他的 ok 下面 说一下思路把 首先 说一下原理 我是使用bitmap 创建两张图 一开始的时候 一张在下面记为1号 一张在上面 记为2号 当手指向下滑动时 判断 1号 的起点位置 是否完全超出屏幕 如果超出屏幕的话 那么将2号变为下面 1号变为上面 (移动1号的Y坐标) 大体思路 是这样. 里面还有许多判断 比如 是否能向下滑动 起点位置, 星星的判定 哎呀 好烦 说的东西太多啦 来张我的

  • javascript+css好多网站用的选星星实现打分功能的函数

    javascript+css好多网站用的选星星实现打分功能的函数

    函数有两个参数,功能如下: obj:  img标签组的父容器,类型为DOM对象: oEvent: event对象.这个函数的优点是html代码可以很简洁,使用图片也可以很少,只需要两张图片.事件句柄只需要写在img的父容器上即可.演示用的图片我用的是绝对地址,各位在使用的时候改成网站的相对地址就可以了.当我们点击的时候,我用的是个alert事件.事实上,我们会在这个地方用个ajax方法,把相关的参数传到服务器端.只要把alert(this._num+1)写成sendAjax(this._num+

  • js实现星星打分效果的方法

    js实现星星打分效果的方法

    本文实例讲述了js实现星星打分效果的方法.分享给大家供大家参考.具体分析如下: 很多网站都有如下图这样的星星打分效果,今天就看下用js怎么实现打分效果. 效果详解 1. 鼠标移上的时候星星点亮,下面的文字显示.鼠标移出的时候星星为灰,下面文字不显示. 2. 鼠标移到某个星星上,它之前的所有星星都会亮. 3. 鼠标移到某个星星上并点击,会显示打分结果.   代码如下 <!doctype html> <html> <head> <meta charset="

  • JS实现星星评分功能实例代码(两种方法)

    JS实现星星评分功能实例代码(两种方法)

    一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

  • javascript实现随机显示星星特效

    本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的  (2)星星随机大小:min=15,max=80  (3)星星的坐标是随机的:               x_left=0,x_right=(浏览器宽-星星宽)               y_top=0,y_bottom=? (4)单击某个星星,星星消失 (5)网页加载完成,开始显示星星 (6)定时器:每隔一个周期,插入一个星星 <html> <head> <meta h

随机推荐