index.js
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
*zoom: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
.fl,
.fr {
_display: inline;
}
.top-banner {
position: absolute;
z-index: 999;
left: 0;
top: 0;
height: 40px;
line-height: 40px;
padding: 0 30px;
width: 100%;
font-size: 13px;
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
}
.top-banner a {
color: #fff;
text-decoration: none;
}
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Rainy Day – 逼真的雨滴效果</title>
<style media="screen">
body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="css/index.css">
<script src="js/rainyday.js"></script>
<script>
function run() {
var image = document.getElementById('background');
image.onload = function() {
var engine = new RainyDay({
image: this
});
engine.rain([ [3, 2, 2] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'http://i.imgur.com/U1Tqqdw.jpg';
}
</script>
</head>
<body onload="run();">
<img id="background" alt="background" src="" />
</body>
<div style="position:fixed;bottom:30px;width:100%;height:90px;z-index:999">
<div class="footer-banner" style="width:728px; margin:0 auto"></div>
</div>
</html>