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


Posted in Javascript onApril 23, 2014

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”为下雨的小图标,可以改成其它的图片下雪啊,下冰雹啊,下钱都行
Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
微信小程序实现评论功能
Nov 28 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
jquery map方法使用示例
Apr 23 #Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 #Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 #Javascript
Jquery实现Div上下移动示例
Apr 23 #Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 #Javascript
JQuery下拉框应用示例介绍
Apr 23 #Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
php缓存技术介绍
2006/11/25 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
vue cli 全面解析
2018/02/28 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
Python实现单词翻译功能
2017/06/06 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
农村改厕实施方案
2014/03/22 职场文书
群众路线剖析材料
2014/09/30 职场文书
优秀班主任申报材料
2014/12/16 职场文书
六五普法学习心得体会
2016/01/21 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL