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”为下雨的小图标,可以改成其它的图片下雪啊,下冰雹啊,下钱都行

相关文章

  • ajax异步请求详解

    ajax异步请求详解

    做前端开发的朋友对于ajax异步更新一定印象深刻,本文主要介绍了关于ajax异步请求的那点事,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 原生js实现addclass,removeclass,toggleclasss实例

    原生js实现addclass,removeclass,toggleclasss实例

    下面小编就为大家带来一篇原生js实现addclass,removeclass,toggleclasss实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起 小编过来看看吧
    2016-11-11
  • 详解jquery easyui之datagrid使用参考

    详解jquery easyui之datagrid使用参考

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件,本篇文章主要介绍了jquery easyui之datagrid使用参考,有兴趣的可以了解一下。
    2016-12-12
  • jquery移除了live()、die(),新版事件绑定on()、off()的方法

    jquery移除了live()、die(),新版事件绑定on()、off()的方法

    下面小编就为大家带来一篇jquery移除了live()、die(),新版事件绑定on()、off()的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jQuery 实时保存页面动态添加的数据的示例

    jQuery 实时保存页面动态添加的数据的示例

    本篇文章主要介绍了jQuery 实时保存页面动态添加的数据的示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 10个基于Jquery的幻灯片插件教程

    10个基于Jquery的幻灯片插件教程

    当有大量的内容或者图片需要在你的网站或者BLOG上展示的时候,以幻灯片滑动的方式是一个不错的选择,这种效果常用于公司网站或者个人BLOG。
    2010-10-10
  • jquery miniui 教程 表格控件 合并单元格应用

    jquery miniui 教程 表格控件 合并单元格应用

    本文将详细介绍jquery miniui 教程 表格控件 合并单元格的应用,需要的朋友可以参考下
    2012-11-11
  • zTree jQuery 树插件的使用(实例讲解)

    zTree jQuery 树插件的使用(实例讲解)

    下面小编就为大家带来一篇zTree jQuery 树插件的使用(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • jquery.validate使用详解

    jquery.validate使用详解

    Ajax在Web应用中的作用越来越大,许多工具都包含了对这一功能的使用,以下是对这些常用工具中Ajax的典型实例.
    2016-06-06
  • jQuery获取iframe的document对象的方法

    jQuery获取iframe的document对象的方法

    获取iframe的document对象进行dom的操作,实现方法很多,下面是jquery的实现过程,喜欢玩iframe的朋友可以参考下
    2014-10-10

最新评论