编程 Javascript

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>

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

刷新页面实现方式总结(HTML,ASP,JS)

Nov 13 Javascript

纯JavaScript实现的完美渐变弹出层效果代码

Apr 02 Javascript

Extjs 继承Ext.data.Store不起作用原因分析及解决

Apr 15 Javascript

js关于精确计算和数值格式化以及直接引js文件

Jan 28 Javascript

js获取和设置属性的方法

Feb 20 Javascript

jQuery实现模拟marquee标签效果

Jul 14 Javascript

JS实现光滑展开合拢的菜单效果代码

Sep 16 Javascript

js手机号批量滚动抽奖实现代码

Apr 17 Javascript

微信小程序动态显示项目倒计时效果

Jun 13 Javascript

Node.js连接Sql Server 2008及数据层封装详解

Aug 27 Javascript

webpack dll打包重复问题优化的解决

Oct 10 Javascript

js实现简单页面全屏

Sep 17 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