最好的辦法模糊的jQuery

我一直在開發一個網頁，我打開了一組工具和下面的一切模糊，除了重疊的工具圖標。（像Mac的桌面應用）最好的辦法模糊的jQuery

這裏是如何我已經做到了：

HTML

<body> 
    <div id="tools"></div> 
    <div Id="Blur">in here I have all my page content</div> 
</body>

jQuery的

$(function(){ $('Blur').blur(); });

的事情是：這個工程，但問題一旦頁面上有一些不太好的內容，模糊的進出就會變得非常緩慢。有沒有人知道更好的方式來模糊頁面，而不會對性能產生重大影響？

（如果格式不好看，或者您需要更多的信息，只是告訴我！這是我的第一篇文章與堆棧溢出）

謝謝！

來源

2017-06-15 Isaac S. Weaver

您使用的一些庫創建模糊效果？ jQuery blur是onblur事件處理程序。你有jsfiddle嗎？ –

你不正確選擇來看，缺少引用任何插件/庫，我懷疑任何值得插件的名稱將覆蓋現有的'模糊（）的'函數，事情是在你的例子確實不妥。記住，你可以使用CSS - Jack A在下面有一個例子。 – Santi

你可能想使用一個CSS blur filter。

#Blur { 
    filter: blur(1px); 
}

例如：https://jsfiddle.net/1duss393/

來源

2017-06-15 21:22:36

所以我用你的例子重新編寫了我的代碼。這是我的jsfiddle。 https://jsfiddle.net/edogLdy2/1/ 問題是，當有大量的網頁內容的變化速度慢或laggy。有沒有辦法在使用轉換時模糊很多內容而沒有滯後？ –

@ IsaacS.Weaver使用CSS進行效果通常具有最佳性能，因爲它是由瀏覽器實現的。我不知道任何技巧來優化CSS方法，但是如果您搜索了這些方法，您可能會發現一些技巧。 –

謝謝@JackA。我很感激！ –

在jQuery的模糊（）函數並不意味着什麼東西模糊。當用戶將例如點擊外部元素或單擊選項卡鍵時，它將工作的功能。它與focus（）相同，但是「reverse」。因此，如果您在html中輸入了內容，並且您希望在用戶關注輸入時使用的功能（點擊（）不相同，因爲用戶可以使用Tab鍵來關注輸入），那麼您將使用：

$("input").focus(){...};

但是如果你想要的功能，這將工作時，用戶無焦點的方式從輸入（點擊之外，或按Tab鍵或更改Chrome標籤 - 不管），那麼你將使用：

$("input").blur(){...};

來源

2017-06-15 21:48:59

最好的辦法模糊的jQuery

回答

相關問題