html5实现毛玻璃模糊效果 Aero风格

共6个文件

js：2个

html：2个

svg：1个

css3

canvas

Aero

5星 · 超过95%的资源需积分: 5 68 下载量 149 浏览量 2015-06-09 11:01:04 上传评论 1 收藏 230KB ZIP 举报

温馨提示

html5分别使用css3和canvas实现毛玻璃模糊效果 Aero风格

资源推荐

资源详情

资源评论

收起资源包目录

blur.zip （6个子文件）

blur

index2.html 1KB

index.html 948B

jquery.js 94KB

0.jpg 96KB

0.svg 129KB

StackBlur.js 16KB

共 6 条

<!doctype html> <html lang="en"> <head> <style> </style> <script src="jquery.js"></script> <script src="StackBlur.js"></script> <script> var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img); } else { img.onload = function () { callback(img); img.onload = null; }; }; }; $(function(){ imgLoad('0.jpg', function(img){ $(img).width(300).height(200).attr("id", "blurMe"); $("#i1").after($(img)); stackBlurImage("blurMe","canvas",50,false); $("#canvas").width(300).height(200); document.getElementById("results").src=document.getElementById("canvas").toDataURL(); }); }); </script> </head> <body> <p id="i1">The original img element</p> <br> <p>The canvas with blurred image</p> <canvas id="canvas" width=300 height=300></canvas><br> <p>An image using the canvas as .src</p> <img id="results" style="width:300px;"> </body> </html>

评论收藏

内容反馈

资源评论