jquery 自定义容器下雨效果可将下雨图标改为其他
更新时间:2014年04月23日 17:42:43 作者:
这篇文章主要介绍了jquery 自定义容器下雨效果可将下雨图标改为其他,需要的朋友可以参考下

css样式
复制代码 代码如下:
<style type="text/css">
.box{border-left:5px solid #F93;border-right:5px solid #F93;border-bottom:10px solid #F93;width:100px;height:60px; position:absolute;top:250px;left:300px;z-index:999; overflow:hidden;}
.box2{border-left:5px solid #F93;border-right:5px solid #F93;border-bottom:10px solid #F93;width:100px;height:60px; position:absolute;top:250px;left:500px;z-index:999; overflow:hidden;}
.water{ background:#09F;width:100%; position:absolute; bottom:0px;}
</style>
javascript
复制代码 代码如下:
<script>
//width:400,
//height:300,
//pic:'water-drop.png',//下雨图片 默认为water-drop.png
//speed:1000, //雨速
//num:100, //雨滴的密集度
//dir:['right',160], //雨的飘向 默认为向右飘 雨滴的偏差
$(function(){
$(".container").Rain({width:'500',dir:['right',100],speed:3000,num:100,func:back_func});
})
var i =0;
function back_func(d){
if(parseInt($(".box").position()['left']+$(".box").width())>d&&d>parseInt($(".box").position()['left'])){
if(i>$(".box").height()){
$(".box .water").animate({height:0});
i=0;
return;
}
$(".box .water").animate({height:i++});
}
if(parseInt($(".box2").position()['left']+$(".box2").width())>d&&d>parseInt($(".box2").position()['left'])){
if(i>$(".box2").height()){
$(".box2 .water").animate({height:0});
i=0;
return;
}
$(".box2 .water").animate({height:i++});
}
}
</script>
html
<div class="container">
<div class="box"><div class="water"></div></div>
<div class="box2"><div class="water"></div></div>
</div>
呵呵“water-drop.png”为下雨的小图标,可以改成其它的图片下雪啊,下冰雹啊,下钱都行
相关文章
jquerymobile checkbox及时刷新才能获取其准确值
一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框用jquerymobile 做页面 ,当勾选checkbox 时总是不能获取它正确的值2012-04-04
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
这篇文章主要介绍了jquery实现点击弹出可放大居中及关闭的对话框,具有可拖动、放大、居中及关闭等功能,提供了2种对话框模式供读者选择,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-05-05
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
点击一次上传, 当上传操作结束后才能操作界面,实现方式是通过 ajaxfileuplod 上传文件,需要的朋友参考下吧2018-05-05


最新评论