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>

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

相关文章

  • VUE基于NUXT的SSR 服务端渲染

    VUE基于NUXT的SSR 服务端渲染

    这篇文章主要介绍了VUE基于NUXT的SSR 服务端渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • SyntaxHighlighter代码加色使用方法

    SyntaxHighlighter代码加色使用方法

    原名:SyntaxHighlighter,是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI,当时还属于自由软件,最近打开官方网站发现已被goolge收编。
    2008-09-09
  • JS中类或对象的定义说明

    JS中类或对象的定义说明

    本篇文章主要是对JS中类或对象的定义进行了说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript实现的微信二维码图片生成器的示例

    JavaScript实现的微信二维码图片生成器的示例

    二维码分享功能大多是由后端实现的,对服务器的负载较重,这里有一个前端实现的版本,本文介绍了JavaScript实现的微信二维码图片生成器的示例,有需要的可以了解一下。
    2016-10-10
  • 微信小程序实现上传word、txt、Excel、PPT等文件功能

    微信小程序实现上传word、txt、Excel、PPT等文件功能

    这篇文章主要为大家详细介绍了微信小程序实现上传word、txt、Excel、PPT等文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • JavaScript 七大技巧(一)

    JavaScript 七大技巧(一)

    JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文给大家分享javascript七大技巧(一),对javascript技巧相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • Javascript 函数的四种调用模式

    Javascript 函数的四种调用模式

    这篇文章主要介绍了Javascript 函数的四种调用模式的相关资料,需要的朋友可以参考下
    2016-11-11
  • javascript异步编程代码书写规范Promise学习笔记

    javascript异步编程代码书写规范Promise学习笔记

    这篇文章主要介绍了javascript异步编程代码书写规范Promise学习笔记,需要的朋友可以参考下
    2015-02-02
  • 微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    这篇文章主要为大家详细介绍了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • ES7中利用Await减少回调嵌套的方法详解

    ES7中利用Await减少回调嵌套的方法详解

    大家都知道在ES7中有了标准的回调函数嵌套的解决方案,新增了 async/await两个关键词,所以这篇文章主要给大家介绍了关于Javascript中如何利用Await减少回调嵌套的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-11-11

最新评论