DIV CSS 佈局教程網

下雪了，去堆雪人還是去打雪仗？



聽一首的歌：

您的浏覽器不支持html5 audio 標簽。請用支持html5的浏覽器打開,例如chrome或火狐。





這是一個jQuery下雪特效。
特效的代碼如下：

<style>
body{background:black;color:white}
</style>
<script>
/**
* js網頁雪花效果jquery插件
* 整理
* http:///a/e8t7hoj4.htm
*/
(function($){

$.fn.snow = function(options){

var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出現的頻率
flakeColor : "#FFFFFF" // 整理
},
options = $.extend({}, defaults, options);

var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
}
);

}, options.newOn);

};

})(jQuery);</script>

<script>
$(function(){
$.fn.snow({
minSize: 5, //雪花的最小尺寸
maxSize: 50, //雪花的最大尺寸
newOn: 300 //雪花出現的頻率 這個數值越小雪花越多
});
});
</script>

也可以點擊這裡查看效果：
http:///keleyi/phtml/jqtexiao/5.htm