javascript制作網(wǎng)頁圖片上實現(xiàn)下雨效果
更新時間：2015年02月26日 10:12:50 投稿：hebedich
這里給大家分享的是一則使用javascript實現(xiàn)在網(wǎng)頁圖片上下雨的特效，效果非常炫酷，推薦給小伙伴們。
這里主要是應(yīng)用了一個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
通過點擊來隱藏頁面左欄或右欄，此效果在實際應(yīng)用中很常見，接下來為大家詳細介紹下實現(xiàn)代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
今天小編就為大家分享一篇關(guān)于js中的reduce()函數(shù)講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
等待指定時間后自動跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的js代碼
本文為大家詳細介紹下如何通過js實現(xiàn)等待指定時間后自動跳轉(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的詳細步驟
本文給大家介紹TypeScript環(huán)境搭建并且部署到VSCode的詳細步驟，本文分步驟給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
這篇文章主要為大家詳細介紹了javascript實現(xiàn)全屏頁面滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript代碼性能優(yōu)化總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript代碼性能優(yōu)化總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-05
項目中經(jīng)常會使用到表格，數(shù)據(jù)量大的時候還需要進行分頁，項目設(shè)計階段，我選擇了bootstrapTable的js插件，個人覺得這個框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12
微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)
這篇文章主要介紹了微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04