1. 程式人生 > 其它 >部落格園美化:新增雪花特效

部落格園美化:新增雪花特效

一、將以下程式碼複製貼上到頁首 HTML 程式碼

<!--雪花-->
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>

二、將以下程式碼複製貼上到頁尾 HTML 程式碼

<!-- 雪花js -->
<script type="text/javascript">
   window.onload = function () {
                var minSize = 10; //最小字型
                var maxSize = 40;//最大字型
                var newOne = 500; //生成雪花間隔
                var flakColor = "#f5f5f5fa"; //雪花顏色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("✽");//定義一個雪花
                var dhight = $(window).height(); //定義檢視高度
                var dw =$(window).width()-80; //定義檢視寬度
                setInterval(function(){
                var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花
                var startLeft = Math.random()*dw; //雪花生成是隨機的left值
                var startOpacity = 0.7+Math.random()*0.3; //隨機透明度
                var endTop= dhight-100; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 5000+Math.random()*3000; //雪花飄落速度不同
                flak.clone().appendTo($("body")).css({
                "left":startLeft ,
                "opacity":startOpacity,
                "font-size":sizeflak,
                "color":flakColor
                }).animate({
                "top":endTop,
                "left":endLeft,
                "apacity":0.1
                },durationfull,function(){
                $(this).remove()
                });

效果圖如下: