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 相关文章推荐
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
express启用https使用小记
May 21 Javascript
深入学习JavaScript中的bom
May 27 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
CI框架Session.php源码分析
2014/11/03 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
PHP如何将XML转成数组
2016/04/04 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
营销总经理的岗位职责
2013/12/15 职场文书
高中军训感言200字
2014/02/23 职场文书
诚信考试倡议书
2014/04/15 职场文书
环保建议书300字
2014/05/14 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL