作者Toge (最後一根菸)
看板Ajax
标题Re: [问题] Flash模糊效果的替代方案
时间Fri Dec 2 15:01:31 2011
※ 引述《godead236 (科科彬)》之铭言：
: 原文恕删
: Google "jquery blur effect"就找得到类似的东西了，不过其实没用
: 什麽很多JQuery的语法。
: 我找到的是这个页面
: http://motyar.blogspot.com/2010/04/blur-effect-with-css-and-jquery.html
: 它里面有个DEMO，是根据滑鼠的距离来决定模糊度
: http://motyarblog.000space.com/blur_effect_with_css.html
: 我把它改了一下，利用setTimeout()，逐步减少模糊度，做出动画的感觉。
: 大概像这样
: http://jsfiddle.net/ocowchun/7rB3r/2/
: 欢迎讨论
分享一下我解决的方法：
先分成三个容器
1. 原来的Div
2. 萤幕截图剪出来的jpg档
3. HTML5 canvas
将2用css的display:none隐藏
然後用stackBlur输出到3
将3覆盖在1上面
再将1用css的opacity:0隐藏（不能用display:none因为版面会跑掉）
之後用javascript控制stackBlur的模糊参数 回圈减少至0
模糊参数至0时将1的opacity改成1，使其显示出来
这样就完成了！
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 210.209.143.94