源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript制作网页图片上实现下雨效果

  • 时间:2021-04-09 10:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript制作网页图片上实现下雨效果
这里主要是应用了一个rainyday的js类库,使用非常简单方便,就不多废话了,看演示代码吧。
[url=http://www.w3.org/TR/html4/loose.dtd]http://www.w3.org/TR/html4/loose.dtd[/url]"> <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="[url=http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js]http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js[/url]" 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>
是不是非常酷的效果呢?希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部