javascript实现雪花飘落效果


Posted in Javascript onAugust 19, 2020

圣诞节快到了相信许多公司的前端都在会收到一个需求,那就是做一个关于圣诞节的专题,而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画,当然我们公司也不例外,下面就是本人用js写的一小段雪花秀啦:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <script src="jquery-1.8.3.min.js"></script>
 </head>
 <style>
 html{
  max-width: 720px;
  
 }
 body{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
 }
 .snow{
  width: 100%;
  height: 100%;
  background: pink;
  overflow: hidden;
 }
 .snow_img{
  position: absolute;
  top: -50px;
  margin-left: 1px;
 }
 </style>
 <body>
 <div class="snow"></div>
 <script>
 $(function(){
  $('body').css("height",$(window).height())
  var wid=$(".snow").width();
  var html_snow="<img src='snow.png' class='snow_img'>";
  setInterval(function(){$(".snow").append(html_snow);snowFlow();},100);
  function snowFlow(){
  $(".snow_img").each(function(index){
   var snow_time=(Math.random()*10+4)*1000;
   var wid_snow=Math.floor(Math.random()*40+5)+'px';
         var float_left=Math.random()*wid*2-wid+"px";
   var wid_left=Math.random()*wid+"px";
    if( $(this).css("margin-left")==1+"px"){
   $(this).css("margin-left",wid_left);
   }
   if($(this).width()==0 || $(this).width()==50 ){
   $(this).width(wid_snow);
   }
   $(this).animate({top:800+"px",left:float_left,},snow_time);
   if($(this).offset().top==800){
         $(this).remove();
   }
  })
  }
 });
 
 </script>
 </body>
</html>

代码很简单,都是运动用js的一些基础知识点做出来的,主要是随机数和一些判断。就这么简单。代码不是重点,重点是思维,有了思维你自然就可以做出来了。下面是效果图:

javascript实现雪花飘落效果

想看动态效果的自己复制代码运行就可以了。欢迎给优化建议。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery简单实现日历的方法
May 04 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
js实现直播点击飘心效果
Aug 19 #Javascript
js实现鼠标点击飘爱心效果
Aug 19 #Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python中暂存上传图片的方法
2015/02/18 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
学习党章思想汇报
2014/01/07 职场文书
保安公司服务承诺书
2014/05/28 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
个人租房协议书样本
2014/10/01 职场文书
旷课检讨书范文
2014/10/30 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
git中cherry-pick命令的使用教程
2022/06/25 Servers
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android