JQ_下雪特效
2015-07-22 20:20
411 查看
这是一个jQuery下雪特效。
特效的代码如下:
<style>
body{background:black;color:white}
</style>
<script>
/**
* js网页雪花效果jquery插件
* 柯乐义 keleyi.com 整理
* http://keleyi.com/a/e8t7hoj4.htm */
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出现的频率
flakeColor : "#FFFFFF" //柯乐义 keleyi.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: 50, //雪花的最大尺寸
newOn: 300 //雪花出现的频率 这个数值越小雪花越多
});
});
</script>
特效的代码如下:
<style>
body{background:black;color:white}
</style>
<script>
/**
* js网页雪花效果jquery插件
* 柯乐义 keleyi.com 整理
* http://keleyi.com/a/e8t7hoj4.htm */
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出现的频率
flakeColor : "#FFFFFF" //柯乐义 keleyi.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: 50, //雪花的最大尺寸
newOn: 300 //雪花出现的频率 这个数值越小雪花越多
});
});
</script>
相关文章推荐
- SQL Error: 1366, SQLState: HY000
- HDU 5288 OO’s Sequence(数学啊 多校2015)
- 用c#查询各快递物流信息
- HDU2612,简单广搜题
- 闭包小例子
- 关闭redis
- 【模拟】zoj3844
- Assignment
- OpenJudge - 2757 : 最长上升子序列
- maven从svn上检出报错解决
- Windows下 maven3.0.4的安装步骤+maven配置本地仓库
- 背包问题
- nyoj成绩转换
- android中添加注释
- 【上海交大oj】纸来纸去(动态规划)
- MVC
- 二叉树的递归遍历,用先序和中序输出后序
- JQ_返回顶部
- c语言快排(快速排序)poj2388《学习记录》
- 为什么需要htons(), ntohl(), ntohs(),htons() 函数