課程
/前端開(kāi)發(fā)
/HTML/CSS
/H5+JS+CSS3實(shí)現(xiàn)七夕言情
為什么x坐標(biāo)這樣表示:-' + (width * 2) + 'px
2016-11-18
源自:H5+JS+CSS3實(shí)現(xiàn)七夕言情 2-2
正在回答
學(xué)到這里有兩個(gè)場(chǎng)景,這個(gè)是在實(shí)現(xiàn)兩個(gè)場(chǎng)景之間的切換。用的方法是移動(dòng)父元素的x坐標(biāo)。使用js獲取的width是頁(yè)面可視區(qū)域的width,因?yàn)橹拔覀儗?xiě)了hidden,所以可視頁(yè)面的width其實(shí)是等于一個(gè)場(chǎng)景的width。 而我們要實(shí)現(xiàn)從第一個(gè)頁(yè)面滾動(dòng)到第三個(gè)頁(yè)面,我們的x坐標(biāo)應(yīng)該是2倍的width。所以這里用了 ? (width*2) ? 。 ?
PS:說(shuō)的有點(diǎn)啰嗦,希望你能理解我的意思
Hyram_wu 提問(wèn)者
Lukewarmer
慕斯慕斯
在x軸上移動(dòng) ?translate3d這里指明了3d就是啟用了3d加速,也就是啟動(dòng)GPU來(lái)處理,性能更強(qiáng) (-'+(width*2)+'px,0px,0px)表示x軸向左移動(dòng)width*2,y軸、z軸不移動(dòng)。
舉報(bào)
為七夕節(jié)準(zhǔn)備的H5+JS+CSS3特效案例,由淺入深案例拆分講解
3 回答width : (slides.length * width) + 'px',
1 回答這句'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //設(shè)置頁(yè)面X軸移動(dòng)
4 回答width : (slides.length * width) + 'px', 這句是怎么理解的?
1 回答width: (slides.length * width) + 'px',這句如何計(jì)算的呢?
1 回答boy 的top坐標(biāo)為什么是這樣算的,這是按幾維計(jì)算的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-11-18
學(xué)到這里有兩個(gè)場(chǎng)景,這個(gè)是在實(shí)現(xiàn)兩個(gè)場(chǎng)景之間的切換。用的方法是移動(dòng)父元素的x坐標(biāo)。使用js獲取的width是頁(yè)面可視區(qū)域的width,因?yàn)橹拔覀儗?xiě)了hidden,所以可視頁(yè)面的width其實(shí)是等于一個(gè)場(chǎng)景的width。 而我們要實(shí)現(xiàn)從第一個(gè)頁(yè)面滾動(dòng)到第三個(gè)頁(yè)面,我們的x坐標(biāo)應(yīng)該是2倍的width。所以這里用了 ? (width*2) ? 。 ?
PS:說(shuō)的有點(diǎn)啰嗦,希望你能理解我的意思
2017-08-27
在x軸上移動(dòng) ?translate3d這里指明了3d就是啟用了3d加速,也就是啟動(dòng)GPU來(lái)處理,性能更強(qiáng) (-'+(width*2)+'px,0px,0px)表示x軸向左移動(dòng)width*2,y軸、z軸不移動(dòng)。