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)文章
可拖動(dòng)可改變大小div的實(shí)現(xiàn)代碼
可拖動(dòng)可改變大小div的實(shí)現(xiàn)代碼，非常不錯(cuò)的應(yīng)用，大家可以參考下。2009-08-08
最近加入到新項(xiàng)目組負(fù)責(zé)前端技術(shù)預(yù)研和選型，其中涉及到一個(gè)熟悉又陌生的需求——國(guó)際化＆本地化。熟悉的是之前的項(xiàng)目也玩過(guò)，陌生的是之前的實(shí)現(xiàn)僅僅停留在"有"的階段而已。趁著這個(gè)機(jī)會(huì)好好學(xué)習(xí)整理一下，為后面的技術(shù)選型做準(zhǔn)備2016-09-09
淺談javascript獲取元素transform參數(shù)
本文主要給大家簡(jiǎn)單介紹了javascript獲取元素的transform參數(shù)的方法以及個(gè)人的理解，記錄下來(lái)分享給大家。2015-07-07
原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過(guò)濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過(guò)濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁(yè)面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過(guò)濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單很詳細(xì)的代碼，解決了大家實(shí)現(xiàn)javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單的問(wèn)題，感興趣的小伙伴們可以參考一下2015-11-11
在JavaScript代碼中，多多少少會(huì)有判斷語(yǔ)句。業(yè)務(wù)越復(fù)雜，邏輯就越復(fù)雜，判斷就越多。今天給大家整理下JavaScript中代碼里常會(huì)用到的那些判斷，有需要的可以參考借鑒。2016-08-08
微信小程序身份證驗(yàn)證方法實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序身份證驗(yàn)證方法實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06
vite打包優(yōu)化vite-plugin-compression的使用示例詳解
這篇文章主要介紹了vite打包優(yōu)化vite-plugin-compression的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
本篇內(nèi)容給大家總結(jié)了JavaScript的BUG和錯(cuò)誤，如果大家對(duì)此知識(shí)點(diǎn)有興趣，可以跟著學(xué)習(xí)參考下。2018-05-05
眾所周知圖表是數(shù)據(jù)圖形化的表示，通過(guò)形象的圖表來(lái)展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等。可視化圖表可以幫助開(kāi)發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和 Web 應(yīng)用和項(xiàng)目的可靠性?，F(xiàn)在就讓我們大家一起來(lái)學(xué)習(xí)用D3.js來(lái)實(shí)現(xiàn)折線圖。2016-09-09