国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一分鐘搞定AlloyTouch圖片輪播組件

tanglijun / 3281人閱讀

摘要:所以制作各種各樣的輪播組件還是得心應(yīng)手。第一種輪播圖如上圖所示。因?yàn)槌跏贾凳?,所有向左邊滑?dòng)一定是負(fù)值??梢缘玫揭欢ㄊ???梢阅玫疆?dāng)前的位置以及當(dāng)前所處的位置。是運(yùn)動(dòng)結(jié)束后的回調(diào),用來(lái)設(shè)置的。

輪播圖也涉及到觸摸和觸摸反饋,同時(shí),AlloyTouch可以把慣性運(yùn)動(dòng)打開或者關(guān)閉,并且設(shè)置min和max為運(yùn)動(dòng)區(qū)域,超出會(huì)自動(dòng)回彈。
除了一般的豎向滾動(dòng),AlloyTouch也可以支持橫向滾動(dòng),甚至任何屬性的運(yùn)動(dòng),因?yàn)樗脑O(shè)計(jì)的本質(zhì)就是屬性無(wú)關(guān),觸摸可以反饋到任何屬性的運(yùn)動(dòng)。所以AlloyTouch制作各種各樣的輪播組件還是得心應(yīng)手。

第一種輪播圖如上圖所示。下面開始實(shí)現(xiàn)的過(guò)程。

第0秒

一共五張圖,每張圖占有屏幕比例的百分之88,所以用戶的屏幕里可以看到一張多一點(diǎn)的圖片,給用戶可以橫向滑動(dòng)查看的感覺(jué)。

第10秒


通過(guò)Transform(scroller); 注入CSS3 transform屬性。

第20秒
new AlloyTouch({
    touch: "#carousel-container",//反饋觸摸的dom
    vertical: false,// 監(jiān)聽(tīng)用戶橫向觸摸
    target: scroller, //運(yùn)動(dòng)的對(duì)象
    property: "translateX",  //被運(yùn)動(dòng)的屬性
    min:0.88 * window.innerWidth * -5 + window.innerWidth, 
    max: 0
})

這里最大的難點(diǎn)(其實(shí)也沒(méi)有什么難的),就是就是min的值。因?yàn)槌跏贾凳?,所有向左邊滑動(dòng)一定是負(fù)值??梢缘玫絤ax一定是0。
那么min的值就是: 屏幕的寬度-圖片的張數(shù)*圖片的寬度

圖片的寬度為0.88 * window.innerWidth

屏幕的寬度為window.innerWidth

圖片的張數(shù)為 5

第30秒

如上圖所示,相對(duì)于傳統(tǒng)的swipe然后再去觸發(fā)滾動(dòng),上面的跟手然后再去校正的體驗(yàn)是更加良好的。那么怎么實(shí)現(xiàn)呢?
首先,AlloyTouch是支持step配置。

new AlloyTouch({
    step: 100,
    ...
    ...
    ...
})

只要用戶設(shè)置的step,最后運(yùn)動(dòng)結(jié)束之后,AlloyTouch都會(huì)幫用戶校正到最接近的step的整數(shù)倍的位置。
比如上面是100:

如果運(yùn)動(dòng)的對(duì)象停在 120,會(huì)被校正到100

如果運(yùn)動(dòng)的對(duì)象停在 151,會(huì)被校正到200

如果運(yùn)動(dòng)的對(duì)象停在 281,會(huì)被校正到300

如果運(yùn)動(dòng)的對(duì)象停在 21,會(huì)被校正到0

第40秒

當(dāng)然這有個(gè)問(wèn)題,比如用戶從0滑倒30,其實(shí)他是想去100,但是會(huì)被校正到0!!!
所以光使用校正是不夠。還需要一個(gè)API去阻止校正自己去注入邏輯滾動(dòng)相應(yīng)的位置。所以你必須支持AlloyTouch的:

to 方法

  to(v [, time, easing]) 

其中time和easing不是必須。time的默認(rèn)值是600.

第50秒
var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
    touch: "#carousel-container",//反饋觸摸的dom
    vertical: false,//不必需,默認(rèn)是true代表監(jiān)聽(tīng)豎直方向touch
    target: scroller, //運(yùn)動(dòng)的對(duì)象
    property: "translateX",  //被運(yùn)動(dòng)的屬性
    min: window.innerWidth * -3, //不必需,運(yùn)動(dòng)屬性的最小值
    max: 0, //不必需,滾動(dòng)屬性的最大值
    step: window.innerWidth,
    inertia: false, //不必需,是否有慣性。默認(rèn)是true
    touchEnd: function (evt, v, index) {

        var step_v = index * this.step * -1;
        var dx = v - step_v;

        if (v < this.min) {
            this.to(this.min);
        } else if (v > this.max) {
            this.to(this.max);
        } else if (Math.abs(dx) < 30) {
            this.to(step_v);
        }
        else if (dx > 0) {
            this.to(step_v + this.step);
        } else {
            this.to(step_v - this.step);
        }

        return false;
    },
    animationEnd: function (evt , v) {
        var i = 0,
            len = items.length;
        for (; i < len; i++) {
            if (i === this.currentPage) {
                items[i].classList.add("active");
            } else {
                items[i].classList.remove("active");
            }
        }

    }
})

因?yàn)橐还菜膹垐D,所以
min得到的結(jié)果是 window.innerWidth * -3
max的值依然是0
step的值是 window.innerWidth
通過(guò)設(shè)置 inertia: false,把慣性運(yùn)動(dòng)關(guān)掉
注意看touchEnd里面的return false是為了不去計(jì)算手指離開屏幕后的校正位置、慣性運(yùn)動(dòng)等邏輯。
touchEnd可以拿到當(dāng)前的位置v以及當(dāng)前所處的位置index。
animationEnd是運(yùn)動(dòng)結(jié)束后的回調(diào),用來(lái)設(shè)置nav的active。當(dāng)然不是所有瀏覽器都支持classList,這里只是為了演示代碼足夠簡(jiǎn)潔。
再注意,在touchEnd和animationEnd中能拿到this,也就是AlloyTouch當(dāng)前對(duì)象的實(shí)例。其中,
to方法用來(lái)運(yùn)動(dòng)當(dāng)前對(duì)象
step是當(dāng)前的步長(zhǎng)
還可以拿到currentPage去獲取當(dāng)前所處的頁(yè)碼
還能拿到min和max值,得到運(yùn)動(dòng)的區(qū)間。

最后

所有例子演示和代碼可以在Github上找到。
Github:https://github.com/AlloyTeam/AlloyTouch

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/91277.html

相關(guān)文章

  • 案例 - 收藏集 - 掘金

    摘要:同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候,遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者:孫輝,美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán),相信技術(shù),更相信技術(shù)只是大千世界里知識(shí)的一種,個(gè)人博客: https://sunyuhui.com ...

    張金寶 評(píng)論0 收藏0
  • 案例 - 收藏集 - 掘金

    摘要:同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候,遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者:孫輝,美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán),相信技術(shù),更相信技術(shù)只是大千世界里知識(shí)的一種,個(gè)人博客: https://sunyuhui.com ...

    huangjinnan 評(píng)論0 收藏0
  • AlloyTouch全屏滾動(dòng)插件發(fā)布--30秒搞定順滑H5頁(yè)

    原文鏈接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗(yàn)貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意,雖然是掃碼體驗(yàn),但是AlloyTouch.FullPag...

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

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

0條評(píng)論

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