<!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. cojs QAQ的矩阵 题解报告

    题目描述非常的清晰 首先我们考虑(A*B)^m的求法,这个部分可以参考BZOJ 杰杰的女性朋友 我们不难发现(A*B)^m=A*(B*A)^(m-1)*B A*B是n*n的矩阵,而B*A是k*k的矩阵 ...

  2. 在屏幕上显示C盘根目录下的所有文件和文件夹

    1 import java.io.File; //在屏幕上显示C盘根目录下的所有文件和文件夹 public class ListDemo { public static void main(Strin ...

  3. node解析查询字符串

    var http=require("http"); var url=require("url"); var pages=[ {id:"1", ...

  4. IIS发布报错

    IIS发布报错一般原因 ISAPI和CGI限制作为IIS与ASP.NET的连接桥梁

  5. Linux文件与进程的Capability简介

    UID这种权限机制颗粒太粗,容易引起权利过剩(溢出),Linux引入了Capability:每个Capability系统内以一位Bit代表,OS内部使用64bit存储. 下面是android的capa ...

  6. MongoDB sharding cluster Step by Step

    本篇讲述MongoDB的 Sharding Cluster 的详细步骤,按着做理论上不会有什么错误. 关于说着里边的参数.变量.和设置,没有用到很多,只用到了关键的一些,其他的可以参考MongoDB的 ...

  7. SQL中存储过程和自定义函数的区别

    存储过程:     存储过程可以使得对数据库的管理.以及显示关于数据库及其用户信息的工作容易得多.存储过程是 SQL 语句和可选控制流语句的预编译集合,以一个名称存储并作为一个单元处理.存储过程存储在 ...

  8. makefile的常用规则

    一.前言 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将会学到以下内容: 源程序编译 Makefile的编写 程序库的链接 程序的调试 头文件和系统求助 二.正文 1 ...

  9. 自己动手实现STL：前言

    一.前言 最近,刚看完<STL源码剖析>,深深被实现STL库的那些的大牛们所折服.同时又感觉自己与大牛们差距之大,便萌生深入学习之意.如果仅仅只是看看<STL源码剖析>的话,又 ...

  10. iOS开发：在Swift中调用oc库

    先列举这个工程中用到的oc源码库: MBProgressHUD:半透明提示器,Loading动画等 SDWebImage:图片下载和缓存的库 MJRefresh: 下拉刷新,上拉加载 Alamofir ...