javascript制作网页图片上实现下雨效果
这里主要是应用了一个rainyday的js类库，使用非常简单方便，就不多废话了，看演示代码吧。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<stylemedia="screen">
body{
overflow:hidden;
height:100%;
margin:0;
padding:0;
}
img{
width:100%;
height:100%;
}
</style>
<scriptsrc="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
functionrun(){
varimage=document.getElementById('background');
image.onload=function(){
varengine=newRainyDay({
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>
<bodyonLoad="run();">
<imgid="background"alt="background"src=""/>
</body>
</html>
是不是非常酷的效果呢？希望大家能够喜欢。