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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JavaScript使用cookie
2007/02/02 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jquery validate demo 基础
2015/10/29 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python实现12306火车票查询器
2017/04/20 Python
Python异常处理操作实例详解
2018/08/28 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python有参函数使用代码实例
2020/01/06 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
师范应届生求职信
2013/11/15 职场文书
任课老师推荐信范文
2013/11/24 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
贪污检举信范文
2015/03/02 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书