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)文章
Jquery顏色選擇器ColorPicker實現(xiàn)代碼
這里我要分享一個自己修改的顏色選擇器，有需要的朋友參考下2012-11-11
這篇文章主要為大家詳細介紹了HTML5 Canvas實現(xiàn)圓形時鐘簡易教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法記錄
在使用uniapp開發(fā)項目過程中有時候會想讓一些組件占有屏幕剩余的高度,下面這篇文章主要給大家介紹了關(guān)于UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jquery焦點圖效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
今天小編就為大家分享一篇解決layui輪播圖有數(shù)據(jù)不顯示的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文給大家介紹的是去年很火的一款小游戲--2048用javascript實現(xiàn)的思路以及代碼，有需要的小伙伴可以參考下。2015-07-07
javaScript(JS)替換節(jié)點實現(xiàn)思路介紹
獲取要替換的節(jié)點,這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈2013-04-04
在 JavaScript 中，有一些操作符可以使代碼更簡潔、易讀和高效。這篇文章為大家整理了11個JavaScript中常用操作符的使用，需要的可以參考一下2023-04-04
淺談javascript的url參數(shù)parse和build函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript的url參數(shù)parse和build函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03