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 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
怎么清空javascript数组
May 11 Javascript
JQuery性能优化的几点建议
May 14 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
eslint 的三大通用规则详解
May 16 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
vue开发简单上传图片功能
Jun 30 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
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP文件操作详解
2016/12/30 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
图片自动更新(说明)
2006/10/02 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
vue项目实现图片上传功能
2019/12/23 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python bytes string相互转换过程解析
2020/03/05 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
2014年国庆节演讲稿
2014/09/02 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
师德师风自查总结
2014/10/14 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript