如果你編寫web應用程序，你幾乎肯定會使用jQuery。構建一個響應式網站或應用程序，jQuery可以有很大的幫助。事實上，它可以將整個用戶體驗提升到一個新的水平。在本文中，我編寫了我最喜歡的jQuery提示和技巧來製作和增強響應式網站
滾動到某個元素
無盡的滾動並不是interesting的事情。這就是為什麼設置scrolls的作用，因為你的訪客不需要花費10分鐘才能到達他們正在尋找的信息。
我們先從自動滾動開始：下面的代碼會滾動到頁面上的特定元素：
現在，讓我們設置一個滾動，用戶將通過點擊一個鏈接來激活：
檢測視窗大小
CSS媒體查詢允許您檢測視窗大小，並根據視口寬度將不同的CSS樣式應用於元素。
這也可以在jQuery中完成，它對於你無法實現單獨使用CSS的結果是非常有用。下面的示例演示如何檢測viewport寬度，然後將一個元素添加到列表中。
將導航菜單變為下拉菜單
當你的網站有許多菜單項時，在小屏幕上顯示可能會非常棘手。因此，解決這個問題的一個簡單方法是將導航轉換為下拉菜單。
下面的代碼：從nav中獲取items ，並將其附加到select下拉列表:
將Height/Width的Animate設置為「Auto」
如果你已經嘗試使用thing.animate（{「height」：「auto」}）;在一個元素上，你已經注意到它不起作用。令人高興的是，這個問題有一個快速而且有效的解決方案。
代碼如下：
以及如何使用它：
延遲載入圖像
延遲載入是一種強制頁面只載入客戶端屏幕上可見的圖像的技術。它已被證明是非常有效的提高您的網站載入速度，這是非常重要的用戶體驗和搜索引擎優化。有很多jQuery插件專門用於在您的網站上實現延遲載入。如果你使用WordPress，我絕對推薦這個。
至於jQuery的lazyload插件，我已經在幾個站點上使用這個，簡單的叫做Lazy Load。它的使用非常簡單。第一步是將插件導入到您的HTML頁面中：
現在HTML代碼：默認情況下，Lazy Load假定原始高解析度圖像的URL可以在data-src屬性中找到。您還可以在src屬性中包含一個可選的低解析度佔位符。
現在是激活延遲載入的時候了。使用HTML就可以使用factory方法初始化插件。如果你沒有傳遞任何設置或圖像元素，它會延遲載入lazyload類的所有圖像。
確實有更多的選項可用，所以你只需看一下插件文檔。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/274218.html
微信掃一掃 
支付寶掃一掃 