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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
javascript new后的constructor属性
Aug 05 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 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编码转换
2012/11/05 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python使用多进程的实例详解
2018/09/19 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python实现自动登录后台管理系统
2018/10/18 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python模块内置属性概念及实例
2021/02/18 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
工程业务员工作职责
2013/12/07 职场文书
励志演讲稿600字
2014/08/21 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python