溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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的一些基礎知識點做出來的，主要是隨機數和一些判斷。就這么簡單。代碼不是重點，重點是思維，有了思維你自然就可以做出來了。下面是效果圖：
想看動態效果的自己復制代碼運行就可以了。
關于javascript如何實現雪花飄落效果的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
