Re: [問題] Flash模糊效果的替代方案

看板Ajax作者 (最後一根菸)時間14年前 (2011/12/02 15:01), 編輯推噓0(000)
留言0則, 0人參與, 最新討論串3/3 (看更多)
※ 引述《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
文章代碼(AID): #1Es7VE5y (Ajax)
文章代碼(AID): #1Es7VE5y (Ajax)