<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <style media="screen">

 body {

     overflow: hidden;

     height: 100%;

     margin: 0;

     padding: 0;

 }

 img {

     width: 100%;

     height: 100%;

 }

 </style>

 <script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type="text/javascript"></script>

 <script type="text/javascript">

     function run() {

         var image = document.getElementById('background');

         image.onload = function() {

             var engine = new RainyDay({

                 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>

 <body onLoad="run();">

     <img id="background" alt="background" src="" />

 </body>

 </html>

html在图片上实现下雨效果的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  3. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  6. 使用iframe实现图片上传预览效果

    原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现主页面显示上传的图片. Default.aspx: <%@ Page ...

  7. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  8. 使用Unity3D自带动画系统制作下雨效果

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...

  9. Unity3d中使用自带动画系统制作下雨效果(一)

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...

随机推荐

  1. 欧拉工程第68题：Magic 5-gon ring

    题目链接 任意一条线上的三个数的和都等于9,顺时针,从最小的外圈开始,得到的序列是:432621213 和             序列 9位的字符串:三角环所能形成的最大字符串为432621513. ...

  2. NPOI基础入门(旧版本)

    1.常用的类与方法 工作本HSSFWorkbook 构造方法,无参表示创建一个新的工作本,可以接收一个流用于打开一个现有的工作本 方法CreateSheet(索引):创建指定索引的sheet对象 方法 ...

  3. 告别无止境的增删改查：Java代码生成器

    对于一个比较大的业务系统,我们总是无止境的增加,删除,修改,粘贴,复制,想想总让人产生一种抗拒的心里.那有什么办法可以在正常的开发进度下自动生成一些类,配置文件,或者接口呢?   有感于马上要做个比较 ...

  4. 10个实用的PHP正则表达式

    正则表达式是程序开发中一个重要的元素,它提供用来描述或匹配文本的字符串,如特定的字符.词或算式等.但在某些情况下,用正则表达式去验证一个字符串比较复杂和费时.本文为你介绍10种常见的实用PHP正则表达 ...

  5. linux scp

    scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令.linux的scp命令可以在linux服务器之间复制文件和目录. scp命令的用处: scp ...

  6. PHP Redis 普通封装类

    class redisInit { private $redis; //redis对象 /** * 初始化Redis * $config = array( * 'server' => '127. ...

  7. trim合理和谐

    今天早上,到公司,噩耗传来.上周的上线的功能出现问题,后台mis中有数据不能保存了. 经过紧张的查找,还是我的问题.有一个查重操作,在查重前,会比对新旧值,新值顺手trim了.旧值直接保存了. 在比较 ...

  8. Java基本类型

    转自http://myeyeofjava.iteye.com/blog/1738143 1G=1024M=1024K=1024BYTE=8BIT 1 byte = 1字节  = 8bit 可表达 2的 ...

  9. poj 3792 Area of Polycubes (简单模拟)

    题目 题意:在三维坐标系中,给定n个立方体的中心坐标,立方体的边长为1,按照输入顺序,后来输入的必须和之前输入的立方体有公共的边. 而且,不能和之前输入的立方体相同. 如果满足条件,输出表面积.如果不 ...

  10. 类Item_field

    class Item_field :public Item_ident { protected: void set_field(Field *field); public: Field *field, ...