課程
/前端開(kāi)發(fā)
/JavaScript
/Tab選項(xiàng)卡切換效果
pic.style.marginTop=-170*curIndex+'px'; 請(qǐng)教問(wèn)一下這段的意義 謝謝
2015-06-10
源自:Tab選項(xiàng)卡切換效果 4-1
正在回答
試了一下,這個(gè)原理是這樣的:ul沒(méi)有設(shè)置height,而li設(shè)置了height:170px,使得ul被子元素li撐高為5*170px,這樣子就是一副長(zhǎng)長(zhǎng)的圖片,由于祖先元素.wrap設(shè)置了overflow:hidden;這樣就只能看到第一張圖片。
這時(shí)候設(shè)置了wrap為relative,ul設(shè)置為absolute,那么ul就可以根據(jù)wrap進(jìn)行margin-top向上移動(dòng)-170*n*px進(jìn)行涌移動(dòng)了,這樣圖片不斷地移動(dòng),圖片就會(huì)不斷輪到下一張。
這里只是ul實(shí)現(xiàn)了絕對(duì)定位吧,怎么圖片變成絕對(duì)定位了?
.wrap ul{position:absolute;}?
? .wrap ul li{height:170px;}
應(yīng)該不是這個(gè)原理吧
舉報(bào)
本課程詳細(xì)介紹網(wǎng)頁(yè)頁(yè)面中最流行常用的tab切換效果
1 回答想請(qǐng)教一下使用margin-top實(shí)現(xiàn)圖片切換的原理
2 回答選項(xiàng)卡切換效果如何用jQuery實(shí)現(xiàn),使用each函數(shù)?
3 回答關(guān)于jquery里用each()實(shí)現(xiàn)切換效果的問(wèn)題
1 回答Tab選項(xiàng)卡切換我遇到了三個(gè)問(wèn)題,求大神解答,謝謝
2 回答each()實(shí)現(xiàn)切換效果具體代碼
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)
2015-11-24
試了一下,這個(gè)原理是這樣的:ul沒(méi)有設(shè)置height,而li設(shè)置了height:170px,使得ul被子元素li撐高為5*170px,這樣子就是一副長(zhǎng)長(zhǎng)的圖片,由于祖先元素.wrap設(shè)置了overflow:hidden;這樣就只能看到第一張圖片。
這時(shí)候設(shè)置了wrap為relative,ul設(shè)置為absolute,那么ul就可以根據(jù)wrap進(jìn)行margin-top向上移動(dòng)-170*n*px進(jìn)行涌移動(dòng)了,這樣圖片不斷地移動(dòng),圖片就會(huì)不斷輪到下一張。
2015-11-24
這里只是ul實(shí)現(xiàn)了絕對(duì)定位吧,怎么圖片變成絕對(duì)定位了?
.wrap ul{position:absolute;}?
? .wrap ul li{height:170px;}
應(yīng)該不是這個(gè)原理吧