html在图片上实现下雨效果

 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>

 

你可能感兴趣的:(html)