代码需jq支持,无需对html进行改动。我已经在本站用上了,是不是很有过年的气氛呢~(PS:灵梦的脸就是不给你们看ˋ( ° ▽、° )
我只贴上js代码,将代码拷贝至网页任意位置均可,但不要放在有错误的js之后。
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出现的频率
flakeColor : "#FFFFFF" //懒人建站 www.51xuediannao.com 整理
},
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: 40, //雪花的最大尺寸
newOn: 100 //雪花出现的频率 这个数值越小雪花越多
});
});
</script>
这段代码比较耗资源,经测试,在chrome下流畅运行,FF卡卡的,IE10则出乎意料的流畅。
这个方法的一个缺点是:雪花落到底部之后会导致横向出现滚动条(也就是网页宽度开始来回变化),高度也会有小幅度变化,但不影响页面功能的使用。
来自懒人建站,查看原文点我