javascript制作网页图片上实现下雨效果
更新时间：2015年02月26日 10:12:50 投稿：hebedich
这里给大家分享的是一则使用javascript实现在网页图片上下雨的特效，效果非常炫酷，推荐给小伙伴们。
这里主要是应用了一个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>
是不是非常酷的效果呢？希望大家能够喜欢。
相关文章
这里我要分享一个自己修改的颜色选择器，有需要的朋友参考下2012-11-11
这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
UniApp中Scroll-View设置占满下方剩余高度的方法记录
在使用uniapp开发项目过程中有时候会想让一些组件占有屏幕剩余的高度,下面这篇文章主要给大家介绍了关于UniApp中Scroll-View设置占满下方剩余高度的方法,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了如何简单实现jquery焦点图效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家整理了关于Bootstrap导航的慕课笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
今天小编就为大家分享一篇解决layui轮播图有数据不显示的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。2015-07-07
获取要替换的节点,这种方法只适用于IE浏览器以及适用于各种浏览器的写法，感兴趣的朋友可以参考下哈2013-04-04
在 JavaScript 中，有一些操作符可以使代码更简洁、易读和高效。这篇文章为大家整理了11个JavaScript中常用操作符的使用，需要的可以参考一下2023-04-04
浅谈javascript的url参数parse和build函数
下面小编就为大家带来一篇浅谈javascript的url参数parse和build函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论