快捷導(dǎo)航

javascript實(shí)現(xiàn)雪花飄落效果

更新時(shí)間：2020年08月19日 11:01:20 作者：旺仔520

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

圣誕節(jié)快到了相信許多公司的前端都在會(huì)收到一個(gè)需求，那就是做一個(gè)關(guān)于圣誕節(jié)的專(zhuān)題，而這個(gè)專(zhuān)題為了應(yīng)對(duì)圣誕節(jié)這個(gè)主題都會(huì)加上雪花飄呀飄這個(gè)小動(dòng)畫(huà)，當(dāng)然我們公司也不例外，下面就是本人用js寫(xiě)的一小段雪花秀啦：

<!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>

代碼很簡(jiǎn)單，都是運(yùn)動(dòng)用js的一些基礎(chǔ)知識(shí)點(diǎn)做出來(lái)的，主要是隨機(jī)數(shù)和一些判斷。就這么簡(jiǎn)單。代碼不是重點(diǎn)，重點(diǎn)是思維，有了思維你自然就可以做出來(lái)了。下面是效果圖：

想看動(dòng)態(tài)效果的自己復(fù)制代碼運(yùn)行就可以了。歡迎給優(yōu)化建議。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jsonp跨域請(qǐng)求詳解
這篇文章主要為大家詳細(xì)介紹了jsonp跨域請(qǐng)求的相關(guān)資料，激活了所有接口支持瀏覽器跨域請(qǐng)求的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
詳解webpack異步加載業(yè)務(wù)模塊
本篇文章主要介紹了webpack異步加載業(yè)務(wù)模塊，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
JS實(shí)現(xiàn)讓訪(fǎng)問(wèn)者自助選擇網(wǎng)頁(yè)文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪(fǎng)問(wèn)者自助選擇網(wǎng)頁(yè)文字顏色的方法,涉及javascript針對(duì)radio表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
javascript 精確獲取樣式屬性（下）
繼續(xù)上一部分，我們要看一下顏色。火狐好像不管三七二十一都會(huì)轉(zhuǎn)變?yōu)閞gb格式，不過(guò)我們通常比較習(xí)慣的是hex格式。這就用到以下兩函數(shù)。
2010-01-01
微信開(kāi)發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例
這篇文章主要介紹了微信開(kāi)發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例，具有一定的參考價(jià)值有興趣的可以了解一下。
2016-12-12
js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù)
這篇文章主要介紹了使用js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù),需要的朋友可以參考下
2014-04-04
純javascript模仿微信打飛機(jī)小游戲
純JavaScript模仿微信打飛機(jī)游戲，做網(wǎng)頁(yè)小游戲的借鑒下，界面設(shè)計(jì)是豎長(zhǎng)形仿手機(jī)屏幕風(fēng)格，游戲效果流暢，通過(guò)本篇文章給大家分享純js如何實(shí)現(xiàn)模仿微信打飛機(jī)小游戲，需要的朋友可以參考下
2015-08-08
JavaScript中防抖和節(jié)流的區(qū)別及適用場(chǎng)景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場(chǎng)景，文章通過(guò)圍繞主題的相關(guān)資料展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-05-05
微信小程序商城項(xiàng)目之側(cè)欄分類(lèi)效果(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之側(cè)欄分類(lèi)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
深入淺析JavaScript系列（13）：This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實(shí)踐證明，這個(gè)主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會(huì)發(fā)生問(wèn)題
2016-01-01