JavaScript：飘雪效果

在开始敲代码之前，我需要弄清楚一下几个问题：
1、雪片存在的方式，我是用的<div>❄</div>来表示一个雪片；
2、雪片的大小应该是在一个范围之内而且是随机的；
3、雪片的透明度也应该是有变化的，刚出现的雪片肯定会比飘落了一定时间的雪片的颜色深；
4、雪片出现的位置也应该随机，所以最后飘落的位置也应该随机；
5、最重要的是，因为雪片以div 的形式存在，所以当雪片在飘落到最下方的时候，这个div就应该消失，而不是一直存在于页面中，加重页面的负担。

以下是代码：

html代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/飘雪demo1.css" /><script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script><script type="text/javascript" src="js/飘雪demo1.js" ></script><title>js小案例之飘雪效果</title></head><body><!--这里可以加一个音乐播放器，放你喜欢的歌--><!--<audio src="音乐链接" controls="controls" autoplay="autoplay"></audio>--></body>
</html>

css代码

*{padding: 0;margin: 0;
}body{overflow: hidden;//为了防止雪片与浏览器重合部分导致浏览器出现滚动条，所以要用overflow：hidden；background-color: black;//我在这里用的黑色作为背景，你也可以根据自己的喜欢选择照片，代码像我在下方注释的那样/*background-image: url(../img/7.jpg);background-position: center 0;background-repeat: no-repeat;background-size: cover;-webkit-background-size: cover;
}*/

js代码，这里使用了jQuery

var JGtime = 10 + Math.random()*100;//产生雪片的时间间隔
var flake = $("<div>❄</div>").css("position","absolute");//雪片对象
$(function(){  setInterval(function(){//间隔JGtime产生一个雪片     var dWidth = $(document).width();//获取浏览器页面宽度var dHeight = $(document).height();//获取浏览器页面高度var startLeft = Math.random()*dWidth;//下落前左边的距离随机var endLeft = Math.random()*dWidth;//下落后左边的距离随机var flakeSize = 6 + Math.random()*50;//雪片大小var startOpacity = 0.7+0.3*Math.random();//开始的透明度var endOpacity = 0.4 + 0.3*Math.random();//落下的透明度var durationTime = 4000+8000*Math.random();//时间随机。所以速度随机flake.clone().appendTo($("body")).css({//复制一个雪片对象，添加到body，出现的位置"left":startLeft,"top":"-56px","font-size":flakeSize,//大小"color":"white",//我的雪片是白色，如果你想颜色也随机，可以参考我上一篇（H5 +JavaScript生成验证码）里面的随机颜色的方法。"opacity":startOpacity}).animate({"left":endLeft,"opacity":endOpacity,"top":dHeight},durationTime,function(){$(this).remove();//当雪片到最后，调用回调函数，让他消失，是为了保持页面流畅});//经过一个随机的时间，变成上面的状态},JGtime);
});

JavaScript：飘雪效果相关推荐

Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
java窗口如何定时关闭_[Java教程]【温故而知新】Javascript窗口效果（全屏显示窗口、定时关闭窗口）_星空网...
[温故而知新]Javascript窗口效果 (全屏显示窗口.定时关闭窗口) 2014-10-30 0 1.全屏显示窗口全屏显示窗口 2.定时关闭窗口定时关闭窗口来源:<HTML.CSS.J ...
JavaScript经典效果集锦
转自:蓝色理想申请加精,只有这样本帖子才不会沉下去,感觉这个帖子对大家很有用的! 一实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音复制内容到剪贴板代码: <embed src ...
JavaScript经典效果集锦(转)
JavaScript经典效果集锦(转) 转自:蓝色理想申请加精,只有这样本帖子才不会沉下去,感觉这个帖子对大家很有用的! 一实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音复制内容到剪 ...
JavaScript经典效果集锦(三)
JavaScript经典效果集锦(三) 二十一类似与google个性页面的好东东------网友155120 二十二漂亮的表格二十三经典的带阴影的可拖动的浮动层------网友marvello ...
JavaScript经典效果集锦之四,五
JavaScript经典效果集锦之四二十七超级REAL视频播放器 <object id="player" name="player" classid= ...
Javascript 滑动效果菜单 TreeView [Javascript]
前言这个滑动菜单写了蛮久了,当时没有被用上,现在要用了又翻出来了,毕竟不是网上下载扒的,自己写的,所以还是分享一下,觉得有时间还是尽量自己写的好,呵呵:) 正文还是先来一张效果图吧: 效果一般,觉 ...
【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
JavaScript小效果的实现（笔记）
在学习一些JavaScript效果,做一些实现效果笔记,顺便整理一下思路. LightBox效果实现: <!DOCTYPE html> <meta charset="utf ...

JavaScript：飘雪效果

JavaScript：飘雪效果相关推荐

最新文章

热门文章