javascript制作网页图片上实现下雨效果


Posted in Javascript onFebruary 26, 2015

这里主要是应用了一个rainyday的js类库,使用非常简单方便,就不多废话了,看演示代码吧。

<!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>

是不是非常酷的效果呢?希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 序列化对象实现代码
Dec 18 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
通过实例解析js简易模块加载器
Jun 17 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
如何减少浏览器的reflow和repaint
Feb 26 #Javascript
详谈javascript中DOM的基本属性
Feb 26 #Javascript
jqueryUI里拖拽排序示例分析
Feb 26 #Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 #Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 #Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 #Javascript
You might like
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
接收键盘指令的脚本
2006/06/26 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python检测lvs real server状态
2014/01/22 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
一套Java笔试题
2016/08/20 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
营业员实习自我鉴定
2013/12/07 职场文书
代理协议书
2014/04/22 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
2014年人事科工作总结
2014/11/19 职场文书
五一劳动节慰问信
2015/02/14 职场文书
三行辞职书范文
2015/02/26 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
python中__slots__节约内存的具体做法
2021/07/04 Python