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 相关文章推荐
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
layer弹出层显示在top顶层的方法
Sep 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动态生成虚拟现实VRML网页
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js post提交调用方法
2014/02/12 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
js编写选项卡效果
2017/05/23 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
python 调用有道api接口的方法
2019/01/03 Python
Django缓存系统实现过程解析
2019/08/02 Python
pytorch实现线性拟合方式
2020/01/15 Python
python多维数组分位数的求取方式
2020/03/03 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
一年级小学生评语
2014/04/22 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
碧霞祠导游词
2015/02/09 职场文书
财务统计员岗位职责
2015/04/14 职场文书
Python利用capstone实现反汇编
2022/04/06 Python
基于Python实现射击小游戏的制作
2022/04/06 Python
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫