1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <style media="screen"> 6 body { 7 overflow: hidden; 8 height: 100%; 9 margin: 0; 10 padding: 0; 11 } 12 13 img { 14 width: 100%; 15 height: 100%; 16 } 17 </style> 18 <script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type="text/javascript"></script> 19 <script type="text/javascript"> 20 function run() { 21 var image = document.getElementById(‘background‘); 22 image.onload = function() { 23 var engine = new RainyDay({ 24 image : this, 25 }); 26 engine.rain([ [ 1, 2, 8000 ] ]); 27 engine.rain([ [ 3, 3, 0.88 ], [ 5, 5, 0.9 ], [ 6, 2, 1 ] ], 100); 28 } 29 image.crossOrigin = ‘anonymous‘; 30 image.src = ‘http://i.imgur.com/N7ETzFO.jpg‘; 31 } 32 </script> 33 <title>哇塞！</title> 34 </head> 35 <body onLoad="run();"> 36 <img id="background" alt="background" src="" /> 37 </body> 38 </html>
原文：http://www.cnblogs.com/geekpaul/p/4117116.html