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 相关文章推荐
js的event详解。
Sep 06 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php微信支付接口开发程序
2016/08/02 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jsonp原理及使用
2013/10/28 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python 3中的yield from语法详解
2017/01/18 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python实现汽车管理系统
2018/11/30 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
python字符串Intern机制详解
2019/07/01 Python
详解python中*号的用法
2019/10/21 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
python 检测图片是否有马赛克
2020/12/01 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
应届生求职推荐信
2013/10/28 职场文书
高一政治教学反思
2014/01/28 职场文书
小学领导班子对照材料
2014/08/23 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
MySQL学习之基础命令实操总结
2022/03/19 MySQL
Golang 遍历二叉树
2022/04/19 Golang
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS