成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端常用動(dòng)畫效果和功能控制

A Loity / 1696人閱讀

摘要：原理分析使用延遲加載效果的網(wǎng)站，一般也會(huì)使用一個(gè)默認(rèn)的圖片來占位，比如優(yōu)酷和。這樣可以防止用戶在滾動(dòng)過快時(shí)造成可能出現(xiàn)的頁面結(jié)構(gòu)混亂和圖像一時(shí)加載不出來出現(xiàn)的。針對(duì)這一功能，也有一個(gè)常用的插件。

圖片延遲加載

許多網(wǎng)站的圖片是在下拉滾動(dòng)條時(shí)才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實(shí)現(xiàn)的。它可以延遲加載長(zhǎng)頁面中的圖片。在瀏覽器可視區(qū)域外的圖片不會(huì)被載入，直到用戶將頁面滾動(dòng)到它們所在的位置。在包含很多圖片的長(zhǎng)頁面中延遲加載圖片可以加快頁面加載速度。另一方面也是因?yàn)橥瑫r(shí)加載大量圖片時(shí)很容易因?yàn)槎虝r(shí)間內(nèi)的大量http請(qǐng)求而導(dǎo)致有個(gè)別圖片掛掉而顯示一個(gè)難看的"X"。

原理分析:

使用延遲加載效果的網(wǎng)站，一般也會(huì)使用一個(gè)默認(rèn)的圖片來占位，比如優(yōu)酷和bili。這樣可以防止用戶在滾動(dòng)過快時(shí)造成可能出現(xiàn)的頁面結(jié)構(gòu)混亂和圖像一時(shí)加載不出來出現(xiàn)的"x"。上面這行代碼，真正的src值放在自定義的original屬性中。

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

// 判斷兩個(gè)矩形是否相交,返回一個(gè)布爾值 
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 ; 
}
防止相同事件快速重復(fù)觸發(fā)

這里的觸發(fā)可以理解為執(zhí)行的意思，主要涉及函數(shù)節(jié)流的概念。
在前端需求中，為防止重復(fù)觸發(fā)會(huì)要求短時(shí)間內(nèi)某一事件只能觸發(fā)一次，比如表單提交時(shí)的ajax請(qǐng)求還有輪播圖的滾動(dòng)(很多輪播圖的滾動(dòng)并不如你點(diǎn)擊鼠標(biāo)的速度那么快，所以在觸發(fā)的邏輯里肯定對(duì)短時(shí)重復(fù)觸發(fā)處理過)

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);
})

這個(gè)是只處理最后一次點(diǎn)擊的情況，在不斷點(diǎn)擊的情況下，通過setTimeout的id存刪,觸發(fā)會(huì)持續(xù)向后延遲，只觸發(fā)最后一次。
另一種是只處理第一次點(diǎn)擊的情況，在指定的時(shí)間內(nèi)無論點(diǎn)擊多少次，只執(zhí)行一次觸發(fā)。有一個(gè)插件叫throttle，專門干這事。代碼不長(zhǎng)，有興趣的可以直接研讀代碼。

hover時(shí)顯示資料

使用場(chǎng)景：新浪微博或者論壇，把鼠標(biāo)放在名字上時(shí)會(huì)顯示資料卡片，但是鼠標(biāo)很快劃過時(shí)并不會(huì)顯示。針對(duì)這一功能，也有一個(gè)常用的jQuery插件——hoverIndent。待后述。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111047.html

相關(guān)文章

  • 前端常用動(dòng)畫效果和功能控制

    摘要：原理分析使用延遲加載效果的網(wǎng)站，一般也會(huì)使用一個(gè)默認(rèn)的圖片來占位，比如優(yōu)酷和。這樣可以防止用戶在滾動(dòng)過快時(shí)造成可能出現(xiàn)的頁面結(jié)構(gòu)混亂和圖像一時(shí)加載不出來出現(xiàn)的。針對(duì)這一功能，也有一個(gè)常用的插件。 圖片延遲加載 許多網(wǎng)站的圖片是在下拉滾動(dòng)條時(shí)才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實(shí)現(xiàn)的。它可以延遲加載長(zhǎng)頁面中的圖片。在瀏覽器可視區(qū)域外的圖片...

    luck 評(píng)論0 收藏0

  • 前端常用插件、工具類庫匯總（上）

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

    txgcwm 評(píng)論0 收藏0

  • 「前端早讀君006」移動(dòng)開發(fā)必備：那些玩轉(zhuǎn)H5的小技巧

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

    LittleLiByte 評(píng)論0 收藏0

  • 「前端早讀君006」移動(dòng)開發(fā)必備：那些玩轉(zhuǎn)H5的小技巧

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

    liuyix 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<