<!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. 开源入侵检测系统OSSEC搭建之三：Web界面安装

    注意:以下操作需在OSSEC服务端进行设置 一.下载analogi,存放于/var/www/html/下并赋予权限 [root@localhost ~]# wget https://github.co ...

  2. OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务

    OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务   1.  OpenVAS基础知识 OpenVAS(Open Vulnerability Assessment Sys ...

  3. sql server 自定义函数的使用

    sql server 自定义函数的使用 自定义函数 用户定义自定义函数像内置函数一样返回标量值,也可以将结果集用表格变量返回 用户自定义函数的类型: 标量函数:返回一个标量值 表格值函数{内联表格值函 ...

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

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

  5. 直接拿来用 九个超实用的PHP代码片段（二）

    每位程序员和开发者都喜欢讨论他们最爱的代码片段,尤其是当PHP开发者花费数个小时为网页编码或创建应用时,他们更知道这些代码的重要性.为了节约编码时间,笔者收集了一些较为实用的代码片段,帮助开发者提高工 ...

  6. Linux 线程属性函数总结

    1.初始化一个线程对象的属性 int pthread_attr_init(pthread_attr_t *attr); 返回值:若是成功返回0,否则返回错误的编号 形 参: attr 指向一个线程属性 ...

  7. poj 2777 Count Color（线段树 区间更新）

    题目:http://poj.org/problem?id=2777 区间更新,比点更新多一点内容, 详见注释,  参考了一下别人的博客.... 参考博客:http://www.2cto.com/kf/ ...

  8. java 语言里 遍历 collection 的方式

    我来简单说一下吧,一般有2种方法来遍历collection中的元素,以HashSet为例子HashSet hs=new HashSet();hs.add("hello");hs.a ...

  9. iOS开发：告诉git不要跟踪UserInterfaceState.xcuserstate

    在xcode中使用git管理项目的技巧: 在多人协作开发的时候,每个开发者都会在项目中的某个目录生成一个 UserInterfaceState.xcuserstate 文件,这个文件大概每5s会刷新一 ...

  10. asp.net清除页面缓存防止同时登录

    //清除页面缓存,防止页面回退重复提交数据 在页面里做以下设置就可以使页面的缓存失效,每次都需要获取新页面. Response.Cache.SetCacheability(System.Web.Htt ...