html在图片上实现下雨效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <style media="screen">
 6 body {
 7     overflow: hidden;
 8     height: 100%;
 9     margin: 0;
10     padding: 0;
11 }
12
13 img {
14     width: 100%;
15     height: 100%;
16 }
17 </style>
18 <script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type="text/javascript"></script>
19 <script type="text/javascript">
20     function run() {
21         var image = document.getElementById(‘background‘);
22         image.onload = function() {
23             var engine = new RainyDay({
24                 image : this,
25             });
26             engine.rain([ [ 1, 2, 8000 ] ]);
27             engine.rain([ [ 3, 3, 0.88 ], [ 5, 5, 0.9 ], [ 6, 2, 1 ] ], 100);
28         }
29         image.crossOrigin = ‘anonymous‘;
30         image.src = ‘http://i.imgur.com/N7ETzFO.jpg‘;
31     }
32 </script>
33 <title>哇塞!</title>
34 </head>
35 <body onLoad="run();">
36     <img id="background" alt="background" src="" />
37 </body>
38 </html>
时间: 2024-10-10 17:42:25

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

PHP+jQuery+Ajax实现多图片上传介绍

PHP+jQuery+Ajax实现多图片上传介绍: 本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用. 下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋友可以做一下参考. 在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上,效果图如下: 一.HTML代码: 在页面上放置一个form表单,使用pos

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

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

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

android自定义View实现图片上传进度显示(仿手机QQ上传效果)

首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看一下我实现的效果: 1.效果已经看见了,下面我们来实现它.首先我创建一个android工程ProgressImageView.然后我们重写ImageView控件,创建ProcessImageView类代码如下: package com.example.processimageview; import android.annotation.SuppressLint; import android.content.Context;

图片上传即时预览效果

做项目时一同事推荐的一个picload插件,实现图片上传后,即时预览效果,感觉很不错,分享出来. 点击上传图片后.立即看到预览的效果如下图: 布局代码: <div class="banner" id="CoupicPicYes">图片预览</div> <a class="input-file" href="javascript:void(0);" onclick="$('#photoUp

Android之——史上最简单图片轮播广告效果实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913 如今的Android开发需求越来越来多,实现效果越来越酷炫,很多Android APP都要实现PC网站上那样的图片轮播效果,那么,这些图片的轮播效果是如何实现的呢?下面,我就跟大家一起来实现这些酷炫的功能. 一.原理 首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然后启动一个定时器,每隔一段时间便替换掉显示的

php:利用插件uploadify完成ajax效果的图片上传

可选项需要参数类型 参数名字 解释(布尔型) auto 当文件被添加到队列时,自动上传.(字符串) buttonImg 浏览按钮的背景图片路径.(字符串)   buttonText  默认在按钮上显示的文本.(字符串)  cancelImg    取消按钮的背景图片路径.(字符串)   checkScript   用以检查服务器上已存在文件的后台脚本的路径.[译者注:应该是ajax方式](字符串)   displayData   在上传过程中显示在队列里的数据类型.(字符串)   express

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

原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现主页面显示上传的图片. Default.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC