jquery 自定义容器下雨效果可将下雨图标改为其他

  • 更新时间:2022-06-28 08:52:42
  • 编辑:阚饮香

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

相关教程

  • jQuery选择器知识点分享

    本篇文章主要是对jQuery选择器进行了全面的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    发布时间:2020-03-27

  • jQuery中$(this).index与$.each的用法详解

    这篇文章主要介绍了jQuery 中$(this).index与$.each的使用方法,以及使用环境,有需要的小伙伴自己参考下吧

    发布时间:2020-01-30

  • 实例详解jquery基本过滤选择器

    本篇文章主要是对jquery选择器之基本过滤选择器进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    发布时间:2020-02-10

  • jQuery动态添加.active实现导航效果实例

    这篇文章主要介绍了jQuery动态添加.active 实现导航效果代码思路详解,需要的朋友可以参考下

    发布时间:2021-05-17

  • jquery ajax跨域解决方法

    本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    发布时间:2020-01-25

  • jQuery实现文件编码成base64并通过AJAX上传的实例讲解

    这篇文章主要介绍了jQuery实现文件编码成base64并通过AJAX上传的方法,涉及jQuery前台使用FileReader对象编码base64文件进行ajax上传及后台php处理相关操作技巧,需要的朋友可以参考下

    发布时间:2021-06-05

  • 使用jquery访问DOM对象方法

    本文着重介绍:JavaScript访问DOM对象方法/JQuery访问DOM对象方法,通过JQuery库中的方法访问或控制页面中的元素,比使用JavaScript代码要简洁得多,而且兼容各浏览器,感兴趣的朋友可以了解下

    发布时间:2020-03-10

  • jQuery实现搜索关键字自动匹配功能的实例

    这篇文章主要介绍了基于jQuery实现搜索关键字自动匹配功能,自动匹配搜索关键词功能广泛应用到搜索引擎当中,感兴趣的小伙伴们可以参考一下

    发布时间:2020-03-08

用户留言