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 相关文章推荐
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
使用jquery如何获取时间
Oct 13 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
经营目标责任书
2015/05/08 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技