javascript實(shí)現(xiàn)雪花飄落效果
更新時間：2020年08月19日 11:01:20 作者：旺仔520
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
圣誕節(jié)快到了相信許多公司的前端都在會收到一個需求，那就是做一個關(guān)于圣誕節(jié)的專題，而這個專題為了應(yīng)對圣誕節(jié)這個主題都會加上雪花飄呀飄這個小動畫，當(dāng)然我們公司也不例外，下面就是本人用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>
代碼很簡單，都是運(yùn)動用js的一些基礎(chǔ)知識點(diǎn)做出來的，主要是隨機(jī)數(shù)和一些判斷。就這么簡單。代碼不是重點(diǎn)，重點(diǎn)是思維，有了思維你自然就可以做出來了。下面是效果圖：
想看動態(tài)效果的自己復(fù)制代碼運(yùn)行就可以了。歡迎給優(yōu)化建議。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jsonp跨域請求的相關(guān)資料，激活了所有接口支持瀏覽器跨域請求的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了webpack異步加載業(yè)務(wù)模塊 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法,涉及javascript針對radio表單控件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
繼續(xù)上一部分，我們要看一下顏色?；鸷孟癫还苋叨欢紩D(zhuǎn)變?yōu)閞gb格式，不過我們通常比較習(xí)慣的是hex格式。這就用到以下兩函數(shù)。2010-01-01
微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例
這篇文章主要介紹了微信開發(fā)之調(diào)起攝像頭、本地展示圖片、上傳下載圖片實(shí)例，具有一定的參考價值有興趣的可以了解一下。2016-12-12
js函數(shù)定時器實(shí)現(xiàn)定時讀取系統(tǒng)實(shí)時連接數(shù)
這篇文章主要介紹了使用js函數(shù)定時器實(shí)現(xiàn)定時讀取系統(tǒng)實(shí)時連接數(shù),需要的朋友可以參考下2014-04-04
純JavaScript模仿微信打飛機(jī)游戲，做網(wǎng)頁小游戲的借鑒下，界面設(shè)計是豎長形仿手機(jī)屏幕風(fēng)格，游戲效果流暢，通過本篇文章給大家分享純js如何實(shí)現(xiàn)模仿微信打飛機(jī)小游戲，需要的朋友可以參考下2015-08-08
JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景，文章通過圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
微信小程序商城項(xiàng)目之側(cè)欄分類效果(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之側(cè)欄分類效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
深入淺析JavaScript系列（13）：This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實(shí)踐證明，這個主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會發(fā)生問題2016-01-01