javascript制作網(wǎng)頁圖片上實(shí)現(xiàn)下雨效果
更新時(shí)間：2015年02月26日 10:12:50 投稿：hebedich
這里給大家分享的是一則使用javascript實(shí)現(xiàn)在網(wǎng)頁圖片上下雨的特效，效果非常炫酷，推薦給小伙伴們。
這里主要是應(yīng)用了一個(gè)rainyday的js類庫，使用非常簡單方便，就不多廢話了，看演示代碼吧。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style media="screen">
body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
}
</style>
<script src=" <script type="text/javascript">
function run() {
var image = document.getElementById('background');
image.onload = function() {
var engine = new RainyDay({
image : this,
});
engine.rain([ [ 1, 2, 8000 ] ]);
engine.rain([ [ 3, 3, 0.88 ], [ 5, 5, 0.9 ], [ 6, 2, 1 ] ], 100);
}
image.crossOrigin = 'anonymous';
image.src = 'http://i.imgur.com/N7ETzFO.jpg';
}
</script>
<title>哇塞！</title>
</head>
<body onLoad="run();">
<img id="background" alt="background" src="" />
</body>
</html>
是不是非?？岬男Ч?？希望大家能夠喜歡。
相關(guān)文章
書上對于原型對象的說法給我整的眼花繚亂,完全不知道它在說什么,查了好多資料,終于有了些理解,下面我以通俗的大白話說說我對原型對象的理解2012-12-12
點(diǎn)擊隱藏頁面左欄或右欄實(shí)現(xiàn)js代碼
通過點(diǎn)擊來隱藏頁面左欄或右欄，此效果在實(shí)際應(yīng)用中很常見，接下來為大家詳細(xì)介紹下實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
今天小編就為大家分享一篇關(guān)于js中的reduce()函數(shù)講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
等待指定時(shí)間后自動(dòng)跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的js代碼
本文為大家詳細(xì)介紹下如何通過js實(shí)現(xiàn)等待指定時(shí)間后自動(dòng)跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的腳步代碼，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
符合W3C網(wǎng)頁標(biāo)準(zhǔn)的iframe標(biāo)簽的使用方法
符合W3C網(wǎng)頁標(biāo)準(zhǔn)的iframe標(biāo)簽的使用方法...2007-07-07
TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟
本文給大家介紹TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟，本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
javascript實(shí)現(xiàn)全屏頁面滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)全屏頁面滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript代碼性能優(yōu)化總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript代碼性能優(yōu)化總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-05
BootStrapTable服務(wù)器分頁實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格，數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁，項(xiàng)目設(shè)計(jì)階段，我選擇了bootstrapTable的js插件，個(gè)人覺得這個(gè)框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12
微信小程序吸底區(qū)域適配iPhoneX的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序吸底區(qū)域適配iPhoneX的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04