国产女人被狂躁到高潮小说,亚洲日韩一区二区三区,色窝窝无码一区二区三区成人网站 ,丰满岳乱妇在线观看中字无码

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

網(wǎng)站前端制作之滑動滾動條時圖片和文字同時滾動

發(fā)表日期:2020-01-17 09:26:01   作者來源:方維網(wǎng)絡(luò)   瀏覽:5479   標(biāo)簽:網(wǎng)站前端制作    
在有的網(wǎng)站詳情頁(產(chǎn)品或案例)中,有時要實現(xiàn)的效果是主體內(nèi)容左右布局,左側(cè)是一張或多張圖片組成的圖片集,右側(cè)是文字介紹(或者是其他內(nèi)容),當(dāng)滾動滾動條時圖片集跟隨滾動條往下滾動展示,右側(cè)文字始終懸浮在瀏覽器的右側(cè)不動,高度限制在瀏覽器一屏的高度之內(nèi),里面的文字超出限制的高度時,讓它超出隱藏滑動顯示;滾動條滾動時右側(cè)里面文字介紹也跟隨滾動,當(dāng)滾動條滾動到右側(cè)圖片集底部時,右側(cè)文字內(nèi)容跟隨著一起隱藏。
效果如下圖:

1.進(jìn)入詳情頁時:

前端示例1

2. 滾動滾動條往下瀏覽時:

3. 當(dāng)滾動條滾動到右側(cè)圖片集底部時:

前端示例2


   html如圖:
1. 左側(cè)圖片集:

html代碼

2. 右側(cè)文字內(nèi)容:

html代碼2

css代碼我就不發(fā)出來了,主要是運用了js。
Js如圖:

JS代碼1

JS代碼2

JS代碼3

具體的可以看圖片里的注釋。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://www.sdlwjx666.com/news/5520.html
相關(guān)網(wǎng)站設(shè)計案例