zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【模板】线段树
    【模板】快速幂
    【模板】SPFA
    【模板】链式前向星
    C语言博客作业--函数嵌套调用
    C语言博客作业--结构体
    C博客作业--指针
    C语言博客作业--字符数组
    C语言博客作业--一二维数组
    C语言博客作业--函数
  • 原文地址:https://www.cnblogs.com/geekpaul/p/4117116.html
Copyright © 2011-2022 走看看