<!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. C编译过程概述

    转自:http://my.oschina.net/apeng/blog/105245 C 编译过程概述 目前Linux下最常用的C语言编译器是GCC(GNU Compiler Collection), ...

  2. 3、JPA一些常用的注解

    常用注解有下面这些: ①:@Entity.@Table.@Id.@GeneratedValue.@Column.@Basic ②:@Transient 用于忽略某个属性,而不对该属性进行持久化操作 ③ ...

  3. Java API —— Collections类

    1.Collections类概述         针对集合操作 的工具类,都是静态方法   2.Collections成员方法         public static <T> void ...

  4. PHP Redis 普通封装类

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

  5. Android开发之LocationManager和定位

    代码: /* * 获取当前的位置,并通过短信发送位置到指定号码 */ public class LocationService extends Service { private LocationMa ...

  6. [51NOD1126]求递推序列的第n项(矩阵快速幂)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 存在参数a,b为负数的情况.这时候要这么处理: 根据mo ...

  7. 8天学通MongoDB——第七天 运维技术

    这一篇我们以管理员的视角来看mongodb,作为一名管理员,我们经常接触到的主要有4个方面: 1．  安装部署 2．  状态监控 3．  安全认证 4．  备份和恢复, 下面我们就一点一点的讲解. 一 ...

  8. 关于fft的一点总结

    好吧,其实我并没有深入运用fft,只会优化卷积 听说fft经常和生成函数结合在一起………………oi真是迅猛发展,我真是与时代脱节了…… 关于fft的学习推荐直接去看算法导论,写得非常清楚 主要弄懂n次 ...

  9. IIS大数据请求设置方法

    大并发大数据量请求一般会分为几种情况: 1.大量的用户同时对系统的不同功能页面进行查找,更新操作 2.大量的用户同时对系统的同一个页面,同一个表的大数据量进行查询操作 3.大量的用户同时对系统的同一个 ...

  10. IIS Web负载均衡的几种方式

    Web负载均衡的几种实现方式 摘要:负载均衡(Load Balance)是集群技术(Cluster)的一种应用.负载均衡可以将工作任务分摊到多个处理单元,从而提高并发处理能力.目前最常见的负载均衡应用 ...