PC端內容橫向滾動效果

2021-09-02 23:30:46 字數 572 閱讀 8485

想要實現的效果如下

首先要有乙個大的div,裡面包裹的內容可以左右移動。開始以為是很複雜的操作,查了相關資料發現很簡單,只需要操作css,都不需要自己寫js

class="scrollbox"的塊就是最外層的包裹塊;class="blockdiv"的塊是通過v-for迴圈產生多個

v-if

="showblock"

class

="scrollbox"

>

v-for

="item in blockoptions"

class

="blockdiv"

>

div>

div>

注意:.blockdiv類display本來想用inline-block結果發現不行,但發現必須使用inline-table才能保證子模組水平排布

.scrollbox

.blockdiv

完善跑馬燈效果 內容長時有橫向滾動效果

之前的 實現了跑馬燈的縱向的滾動效果,每條內容長度固定,如果想實現縱向加橫向的滾動效果,就是說完全顯示內容的話,如下 html class shouhead clear class shouleft class ywxian span class ywfont 要聞通知span div class ...

jQuery內容橫向拖拽滾動

如果有業務需求 使用橫向滾動,而又不想用滾動條,可以使用橫向拖拽滾動,主要是利用元素的scrollleft特性 廢話不多說直接上 css box box container box container a.mumber html結構 person1 person2 person3 person5 p...

PC橫向單屏swiper 視差效果

1.1關鍵屬性 parallax true 初始化時加上這一條,馬上就能開啟視差效果的大門 data swiper parallax 100 動畫的平移值,一般為x data swiper duration 2000 動畫持續時間 可不止要注意這些屬性呢!還有乙個屬性需要注意 一般來說data sw...