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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
详细分析vue表单数据的绑定
Jul 20 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
一个查看session内容的函数
2006/10/09 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jQuery链使用指南
2015/01/20 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
Python中的TCP socket写法示例
2018/05/11 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
深入解析神经网络从原理到实现
2019/07/26 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
工程管理专业个人求职信范文
2013/12/07 职场文书
司法所长先进事迹
2014/06/02 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS