jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他
更新時(shí)間：2014年04月23日 17:42:43 作者：
這篇文章主要介紹了jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他,需要的朋友可以參考下
css樣式
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<script>
//width:400,
//height:300,
//pic:'water-drop.png',//下雨圖片 默認(rèn)為water-drop.png
//speed:1000, //雨速
//num:100, //雨滴的密集度
//dir:['right',160], //雨的飄向 默認(rèn)為向右飄 雨滴的偏差
$(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”為下雨的小圖標(biāo)，可以改成其它的圖片下雪啊，下冰雹啊，下錢都行
相關(guān)文章
利用浮層使select不可選的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇利用浮層使select不可選的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-12-12
jquerymobile checkbox及時(shí)刷新才能獲取其準(zhǔn)確值
一般登錄的時(shí)候 都有個(gè)記住用戶名 記住密碼 的兩個(gè)checkbox 多選框用jquerymobile 做頁(yè)面 ，當(dāng)勾選checkbox 時(shí)總是不能獲取它正確的值2012-04-04
jquery插件ContextMenu設(shè)置右鍵菜單
這篇文章主要介紹了jquery插件ContextMenu設(shè)置右鍵菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
基于jquery fly插件實(shí)現(xiàn)加入購(gòu)物車拋物線動(dòng)畫效果
在購(gòu)物網(wǎng)站中，加入購(gòu)物車的功能是必須的功能，有的網(wǎng)站在用戶點(diǎn)擊加入購(gòu)物車按鈕時(shí)，就會(huì)出現(xiàn)該商品從點(diǎn)擊出以拋物線的動(dòng)畫相似加入購(gòu)物車，這個(gè)功能看起來(lái)非常炫，對(duì)用戶體驗(yàn)也有一定的提高。下面介紹基于jquery fly插件實(shí)現(xiàn)加入購(gòu)物車拋物線動(dòng)畫效果2016-04-04
這篇文章主要介紹了jquery實(shí)現(xiàn)文本框的文本自動(dòng)補(bǔ)全效果,大家參考使用吧2014-01-01
jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框(附demo源碼下載)
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框,具有可拖動(dòng)、放大、居中及關(guān)閉等功能,提供了2種對(duì)話框模式供讀者選擇,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
jQuery Migrate是應(yīng)用遷移輔助插件，是用于高級(jí)版本兼容低級(jí)版本輔助插件。這篇文章主要介紹了jQuery Migrate 插件用法 ,需要的朋友可以參考下2019-05-05
jquery中g(shù)et和post的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中g(shù)et和post的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jquery ajaxfileuplod 上傳文件 essyui laoding 效果【防止重復(fù)上傳文件】
點(diǎn)擊一次上傳, 當(dāng)上傳操作結(jié)束后才能操作界面，實(shí)現(xiàn)方式是通過(guò) ajaxfileuplod 上傳文件，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下2014-04-04