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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现批量下载图片的方法
2015/07/08 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python的flask框架难学吗
2020/07/31 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
聊聊redis-dump工具安装问题
2022/01/18 Redis
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
Java的Object类的九种方法
2022/04/13 Java/Android
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python