博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
飘雪效果
阅读量:6305 次
发布时间:2019-06-22

本文共 1669 字,大约阅读时间需要 5 分钟。

1  2  3  4 
5 6
7 8 9 10 11 12 13 14 15 16 *{17 margin:0px;18 padding:0px;19 }20 body{21 background-color:#000;22 overflow:hidden;23 }24 25 26 ///
27 var minSize = 5;//雪花最小尺寸28 var maxSize = 50;//雪花最大尺寸29 var newOn = 400;//每隔0.4秒就产生一个雪花30 var flakeColor = "#fff";//雪花颜色31 var $flake = $("
").css("position", "absolute").html("❄");//命名一个对象用$符号开头,此处命名一个div,内容为雪花32 //var $flake = $("
").css("position", "absolute").html('');33 $(function () {34 var documentWidth = $(document).width();//获取文档宽度35 var documentHight = $(document).height();//获取文档高度36 setInterval(function () {37 var startPositionLeft = Math.random() * documentWidth;//产生雪花一开始的随机的left38 var startOpacity = 0.7 + Math.random() * 0.3;//产生雪片一开始的透明度39 var endOpacity = 0.4 + Math.random() * 0.3;//产生雪片结束的透明度40 var endPositionLeft = Math.random() * documentWidth;//产生雪片下落后的随机的left41 var durationFall = documentHight * 10 + Math.random() * 3000;//产生一个雪片下落的随机的时间42 var sizeFlake = minSize + Math.random() * maxSize;//产生随机大小的雪片43 $flake.clone().appendTo("body").css({44 "left": startPositionLeft,45 "opacity": startOpacity,46 "font-size": sizeFlake,47 "color": flakeColor,48 "top":"-55px"49 }).animate({50 "top": documentHight,51 "left": endPositionLeft,52 "opacity":endOpacity53 }, durationFall, function () {54 $(this).remove();55 });56 }, newOn);57 });
View Code

主要使用setInterval与animate结合使用

转载于:https://www.cnblogs.com/snow52132/p/7277178.html

你可能感兴趣的文章
zabbix监控安装与配置
查看>>
python 异常
查看>>
last_insert_id()获取mysql最后一条记录ID
查看>>
可执行程序找不到lib库地址的处理方法
查看>>
bash数组
查看>>
Richard M. Stallman 给《自由开源软件本地化》写的前言
查看>>
oracle数据库密码过期报错
查看>>
修改mysql数据库的默认编码方式 .
查看>>
zip
查看>>
How to recover from root.sh on 11.2 Grid Infrastructure Failed
查看>>
rhel6下安装配置Squid过程
查看>>
《树莓派开发实战(第2版)》——1.1 选择树莓派型号
查看>>
在 Linux 下使用 fdisk 扩展分区容量
查看>>
结合AlphaGo算法和大数据的量化基本面分析法探讨
查看>>
如何在 Ubuntu Linux 16.04 LTS 中使用多个连接加速 apt-get/apt
查看>>
《OpenACC并行编程实战》—— 导读
查看>>
机器学习:用初等数学解读逻辑回归
查看>>
如何在 Ubuntu 中管理和使用逻辑卷管理 LVM
查看>>
Oracle原厂老兵:从负面案例看Hint的最佳使用方式
查看>>
把自己Github上的代码添加Cocoapods支持
查看>>