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>
是不是非常酷的效果呢？希望大家能够喜欢。
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下