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的一些基础知识点做出来的，主要是随机数和一些判断。就这么简单。代码不是重点，重点是思维，有了思维你自然就可以做出来了。下面是效果图：

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

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

赞 (0)

相关推荐

  • 使用javascript实现雪花飘落的效果

    看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome. 2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快. 3.向文档中添加元素直接改成通过JS代码创建元素对象的方式. 实现思路: 1.初始化生成10个div,全都采用绝对定位

  • JS和JQuery实现雪花飘落效果

    JS和JQuery实现雪花飘落效果

    很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式. 我们先来看一下需要实现的雪花效果: 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 解释 setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setT

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • 使用js实现雪花飘落效果

    使用js实现雪花飘落效果

    今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head>  <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var

  • 原生JS实现的雪花飘落动画效果

    原生JS实现的雪花飘落动画效果

    本文实例讲述了原生JS实现的雪花飘落动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>www.jb51.net JS下雪动画</title> &

  • JS实现的雪花飘落特效示例

    JS实现的雪花飘落特效示例

    本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html <!DOCTYPE html> <html> <head> <title> Canvas - 雪花特效 </title> <meta charset="utf-8"> <style> *{ margin:0px; padding:0px; } .myCanvas{ fl

  • JS实现模拟风力的雪花飘落效果

    本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JavaScript实现雪花飘落效果特效

    没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽.雪,是冬天的灵魂,为大地铺好背景,之后发生的都如梦似幻,就像童话般的存在.冬天没有雪,能难倒程序猿吗,没有雪自己造,这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

  • javascript实现雪花飘落效果

    圣诞节快到了相信许多公司的前端都在会收到一个需求,那就是做一个关于圣诞节的专题,而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画,当然我们公司也不例外,下面就是本人用js写的一小段雪花秀啦: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="Content-Type

  • OpenGL Shader实例分析（7）雪花飘落效果

    OpenGL Shader实例分析（7）雪花飘落效果

    研究了一个雪花飘落效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0", 2D) = "white" {} iChannelReso

  • IOSdrawRect实现雪花飘落效果

    IOSdrawRect实现雪花飘落效果

    本文实例为大家分享了IOSdrawRect实现雪花飘落效果的具体代码,供大家参考,具体内容如下 绘制原理: 雪花效果最主要的思路就是在于循环产生带雪花图片的imageView, 产生的雪花的imageview的 x.y.宽.下落的速度都是随机的,这个可以用随机数来产生数据. 实现代码: #import <UIKit/UIKit.h> @interface HHFSnowflakeFallingView : UIView /** * 快速创建一个雪花飘落效果的view * * @param bg

  • jQuery实现雪花飘落效果

    本文实例为大家分享了jQuery实现雪花飘落效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现雪花飘落</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js&qu

  • 手写简单的jQuery雪花飘落效果实例

    手写简单的jQuery雪花飘落效果实例

    前言 最近闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿来用了,改起来更是容易. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>雪花飘落</title> </head> <

  • python实现雪花飘落效果实例讲解

    在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教大家如何利用pygame模块实现雪花飘落的效果吧,总共都用不到40行代码就可以实现哦,希望对你们有所帮助 第一步:我们先打开我们的pycharm软件,然后新建一个Python文件 第二步:建立好文件之后,我们在编辑页面输入以下代码: import pygame import sys #导入模块 im

随机推荐