javascript制作网页图片上实现下雨效果
作者:bea
这里主要是应用了一个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="
这里主要是应用了一个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>
是不是非常酷的效果呢?希望大家能够喜欢。
有用 | 无用
代码如下:
<!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>
是不是非常酷的效果呢?希望大家能够喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js+CSS实现弹出居中背景半透明div层的方法
- js使用post 方式打开新窗口
- JS仿Windows开机启动Loading进度条的方法
- JS实现跟随鼠标闪烁转动色块的方法
- javascript中typeof操作符和constucor属性检测
- JS实现网页滚动条感应鼠标变色的方法
- js随机生成网页背景颜色的方法
- jQuery简单实现隐藏以及显示特效
- 最流行的Node.js精简型和全栈型开发框架介绍
- jQuery对象初始化的传参方式
- JS实现文字链接感应鼠标淡入淡出改变颜色的方法
- JS实现很酷的水波文字特效实例
- jQuery中slideUp 和 slideDown 的点击事件
- jQuery实现移动 和 渐变特效的点击事件
- jQuery 回调函数(callback)的使用和基础
- 使用jQuery获得内容以及内容的属性
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- jquery渐隐渐显的图片幻灯闪烁切换实现方法
- 2则自己编写的jQuery特效分享