正文
Jquery网站下雪花的效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
代码如下：
<script type="text/javascript" src="jquery.min.js"></script> <script src="jq.snow.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function(){
$.fn.snow({
minSize: , //雪花的最小尺寸
maxSize: , //雪花的最大尺寸
newOn: //雪花出现的频率 这个数值越小雪花越多
});
});
</script>
首先要引用Jquery库，到Jquery官网下载
jq.snow.js代码：
/**
* js网页雪花效果jquery插件
*
*
*/
(function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : , //雪花的最小尺寸
maxSize : , //雪花的最大尺寸
newOn : , //雪花出现的频率
flakeColor : "#267aba" //雪花的颜色
},
options = $.extend({}, defaults, options); var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - ,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - ,
endPositionLeft = startPositionLeft - + Math.random() * ,
durationFall = documentHeight * + Math.random() * ;
$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);
将这个引用到网站的页面上就可以了，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为网站增加js网页雪花效果jquery插件，特别适合圣诞/元旦/新年网站气氛 - 懒人建站</title> <script type="text/javascript" src="jquery.min.js"></script> <script src="jq.snow.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function(){
$.fn.snow({
minSize: , //雪花的最小尺寸
maxSize: , //雪花的最大尺寸
newOn: //雪花出现的频率 这个数值越小雪花越多
});
});
</script>
</head>
<body>
</body>
</html>
