版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
snow.js
/**
* js网页雪花效果jquery插件
*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px', 'max-width': '30px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 100, //雪花出现的频率
flakeColor : "#FFFFFF"
},
options = $.extend({}, defaults, options);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 60,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 190 + Math.random() * 100,
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);
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏幕飘雪</title>
<style>
html,
body {
background-color: black;
/*overflow-x: hidden;*/
margin: 0;
}
#mydiv {
background-color: #777;
width: 100%;
height: 1000px;
}
</style>
</head>
<body>
<div id="mydiv">
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script src="js/jq.snow.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function() {
$.fn.snow({
minSize: 5, //雪花的最小尺寸
maxSize: 50, //雪花的最大尺寸
newOn: 50 //雪花出现的频率 这个数值越小雪花越多
});
});
$(document).ready(function(){
$('#middle_right_box').find('.datagrid-wrap').css
})
</script>
</body>
</html>
觉得有帮助的小伙伴右上角点个赞~
