脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js雪花飘落效果

javascript实现雪花飘落效果

 更新时间：2020年08月19日 11:01:20   作者：旺仔520  
这篇文章主要为大家详细介绍了javascript实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

圣诞节快到了相信许多公司的前端都在会收到一个需求，那就是做一个关于圣诞节的专题，而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画，当然我们公司也不例外，下面就是本人用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的一些基础知识点做出来的，主要是随机数和一些判断。就这么简单。代码不是重点，重点是思维，有了思维你自然就可以做出来了。下面是效果图：

想看动态效果的自己复制代码运行就可以了。欢迎给优化建议。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jsonp跨域请求详解

    jsonp跨域请求详解

    这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料，激活了所有接口支持浏览器跨域请求的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解webpack异步加载业务模块

    详解webpack异步加载业务模块

    本篇文章主要介绍了webpack异步加载业务模块 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JS实现让访问者自助选择网页文字颜色的方法

    JS实现让访问者自助选择网页文字颜色的方法

    这篇文章主要介绍了JS实现让访问者自助选择网页文字颜色的方法,涉及javascript针对radio表单控件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript 精确获取样式属性（下）

    javascript 精确获取样式属性（下）

    继续上一部分，我们要看一下颜色。火狐好像不管三七二十一都会转变为rgb格式，不过我们通常比较习惯的是hex格式。这就用到以下两函数。
    2010-01-01
  • 微信开发之调起摄像头、本地展示图片、上传下载图片实例

    微信开发之调起摄像头、本地展示图片、上传下载图片实例

    这篇文章主要介绍了微信开发之调起摄像头、本地展示图片、上传下载图片实例，具有一定的参考价值有兴趣的可以了解一下。
    2016-12-12
  • js函数定时器实现定时读取系统实时连接数

    js函数定时器实现定时读取系统实时连接数

    这篇文章主要介绍了使用js函数定时器实现定时读取系统实时连接数,需要的朋友可以参考下
    2014-04-04
  • 纯javascript模仿微信打飞机小游戏

    纯javascript模仿微信打飞机小游戏

    纯JavaScript模仿微信打飞机游戏，做网页小游戏的借鉴下，界面设计是竖长形仿手机屏幕风格，游戏效果流畅，通过本篇文章给大家分享纯js如何实现模仿微信打飞机小游戏，需要的朋友可以参考下
    2015-08-08
  • JavaScript中防抖和节流的区别及适用场景

    JavaScript中防抖和节流的区别及适用场景

    这篇文章主要介绍了JavaScript中防抖和节流的区别及适用场景，文章通过围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-05-05
  • 微信小程序商城项目之侧栏分类效果(1)

    微信小程序商城项目之侧栏分类效果(1)

    这篇文章主要为大家详细介绍了微信小程序实战商城系列之侧栏分类效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 深入浅析JavaScript系列（13）：This? Yes,this!

    深入浅析JavaScript系列（13）：This? Yes,this!

    在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明，这个主题很难，在不同执行上下文中this的确定经常会发生问题
    2016-01-01

最新评论