前端常用動畫效果和功能控制

luck 發布于2019-08-21 10:31 / 1233人閱讀

摘要：原理分析使用延遲加載效果的網站，一般也會使用一個默認的圖片來占位，比如優酷和。這樣可以防止用戶在滾動過快時造成可能出現的頁面結構混亂和圖像一時加載不出來出現的。針對這一功能，也有一個常用的插件。

圖片延遲加載

許多網站的圖片是在下拉滾動條時才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實現的。它可以延遲加載長頁面中的圖片。在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置。在包含很多圖片的長頁面中延遲加載圖片可以加快頁面加載速度。另一方面也是因為同時加載大量圖片時很容易因為短時間內的大量http請求而導致有個別圖片掛掉而顯示一個難看的"X"。

原理分析:

使用延遲加載效果的網站，一般也會使用一個默認的圖片來占位，比如優酷和bili。這樣可以防止用戶在滾動過快時造成可能出現的頁面結構混亂和圖像一時加載不出來出現的"x"。上面這行代碼，真正的src值放在自定義的original屬性中。

這個效果的實現是通過分別計算瀏覽器可視區域的矩形(距離top和left的距離)和圖片所在的矩形，求它們是否相交，如果相交，則使用上面img標簽中的data-original的值作為src的值，如此就實現了延遲加載的效果。更加具體的細節可以去查看相關源碼實現。

// 判斷兩個矩形是否相交,返回一個布爾值 
function intens(rec1, rec2){ 
    var lc1, lc2, tc1, tc2, w1, h1; 
    lc1 = rec1.left + rec1.width / 2; 
    lc2 = rec2.left + rec2.width / 2; 
    tc1 = rec1.top + rec1.height / 2 ; 
    tc2 = rec2.top + rec2.height / 2 ; 
    w1 = (rec1.width + rec2.width) / 2 ; 
    h1 = (rec1.height + rec2.height) / 2; 
    return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ; 
}

防止相同事件快速重復觸發

這里的觸發可以理解為執行的意思，主要涉及函數節流的概念。
在前端需求中，為防止重復觸發會要求短時間內某一事件只能觸發一次，比如表單提交時的ajax請求還有輪播圖的滾動(很多輪播圖的滾動并不如你點擊鼠標的速度那么快，所以在觸發的邏輯里肯定對短時重復觸發處理過)

function delay_exec(fn, wait) {
    if (_timer["id"]) {
        window.clearTimeout(_timer["id"]);
        delete _timer["id"];
    }

    return _timer["id"] = window.setTimeout(function () {
        fn();
        delete _timer["id"];
    }, wait);
}

var _timer = {};
$("#myid").bind("click", function(){
    delay_exec(function(){}, 300);
})

這個是只處理最后一次點擊的情況，在不斷點擊的情況下，通過setTimeout的id存刪,觸發會持續向后延遲，只觸發最后一次。
另一種是只處理第一次點擊的情況，在指定的時間內無論點擊多少次，只執行一次觸發。有一個插件叫throttle，專門干這事。代碼不長，有興趣的可以直接研讀代碼。

hover時顯示資料

使用場景：新浪微博或者論壇，把鼠標放在名字上時會顯示資料卡片，但是鼠標很快劃過時并不會顯示。針對這一功能，也有一個常用的jQuery插件——hoverIndent。待后述。

云服務器 GPU云服務器浮動效果動畫翻轉動畫效果 html動畫效果啟動頁動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85680.html

前端常用動畫效果和功能控制

摘要：原理分析使用延遲加載效果的網站，一般也會使用一個默認的圖片來占位，比如優酷和。這樣可以防止用戶在滾動過快時造成可能出現的頁面結構混亂和圖像一時加載不出來出現的。針對這一功能，也有一個常用的插件。圖片延遲加載許多網站的圖片是在下拉滾動條時才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實現的。它可以延遲加載長頁面中的圖片。在瀏覽器可視區域外的圖片...

A Loity 2019-08-28 18:09 評論0 收藏0
前端常用插件、工具類庫匯總（上）

摘要：函數庫動畫庫動畫庫，也是目前最通用的動畫庫。下拉框級聯選擇器移動端最好用的的篩選器組件聯動篩選移動端最好用的的篩選器組件聯動篩選顏色選擇器時間選擇器時間日期處理是一個解析，驗證，操作和顯示日期和時間的類庫。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言在開發中，我們經常會將一些常用的代碼塊、功能塊進行封裝，...

txgcwm 2019-08-23 13:06 評論0 收藏0
「前端早讀君006」移動開發必備：那些玩轉H5的小技巧

摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...

LittleLiByte 2019-08-30 15:55 評論0 收藏0
「前端早讀君006」移動開發必備：那些玩轉H5的小技巧

摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...

liuyix 2019-08-23 14:23 評論0 收藏0