<!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常用命令

    启动并查看httpd服务 systemctl start httpd systemctl status httpd.service 启动并查看mysql服务 systemctl start maria ...

  2. 修改linux终端命令行颜色

    进入修改:vim /root/.bashrc 1.PS1 要修改linux终端命令行颜色,我们需要用到PS1,PS1是Linux终端用户的一个环境变量,用来说明命令行提示符的设置.在终端输入命令:#s ...

  3. jquery index（）方法

    搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置.        如果参数是一 ...

  4. socklen_t在windows和linux平台下的头文件定义

    windows平台下:头文件:#include<ws2tcpip.h> linux平台下:下面两个头文件都有定义:1)#include <sys/socket.h>2)#inc ...

  5. linux内核下载

    01最新版:https://www.kernel.org/ 02老旧版:https://www.kernel.org/pub/linux/kernel/v3.x/ ------------------ ...

  6. IOS键盘收起

    1.点击Return按扭时收起键盘 - (BOOL)textFieldShouldReturn:(UITextField *)textField { return [textField resignF ...

  7. NDK(20)JNI的5大性能缺陷及优化技巧

    转自 : http://www.ibm.com/developerworks/cn/java/j-jni/index.html JNI 编程缺陷可以分为两类: 性能:代码能执行所设计的功能,但运行缓慢 ...

  8. git版本库底层命令

    当我们在使用git的时候,有时候需要知道当前文件夹相对于工作目录根目录的相对路径等等,那么我们可以使用 git rev-parse 添加一个参数就可以实现,如: 显示当前仓库版本库 .git 目录所在 ...

  9. Jenkins User on Apt-Get Install Installation

    转自:http://stackoverflow.com/questions/6234016/jenkins-user-on-apt-get-install-installation QUESTION: ...

  10. Python3 学习第一弹：基本数据类型

    本人学习主要从<python基础教程第二版>,<dive into python3>等书籍,及一些网上大牛的博客中学习特别是Python官方文档<Python Tutor ...