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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
javascript实现完美拖拽效果
May 06 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
一个ftp类(ini.php)
2006/10/09 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Python闭包的两个注意事项(推荐)
2017/03/20 Python
tornado 多进程模式解析
2018/01/15 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
大三学习计划书范文
2014/05/02 职场文书
电教室标语
2014/06/20 职场文书
营销与策划专业求职信
2014/06/20 职场文书
整改报告怎么写
2014/11/06 职场文书
趣味运动会加油词
2015/07/18 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python