實現簡單的資訊無縫滾動 移動端

2022-03-14 16:23:23 字數 1386 閱讀 3628

html**:

<

div

style

="position:relative; height:5rem"

>

<

div

id="demo"

style

="position:absolute;width:100%;height: 4rem; overflow:hidden; text-align:center;margin: .5rem 0;"

>

<

div

id="demo1"

>

<

p><

span

>廣東省廣州市 網友:186****0751

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>江蘇省南京市 網友:138****7913

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>廣西省南寧市 網友:136****8755

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>浙江省杭州市 網友:188****3421

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>廣東省惠州市 網友:134****2244

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>廣東省東莞市 網友:132****9649

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>湖南省長沙市 網友:138****1354

span

>通過提交需求得到了律師幫助

p>

<

p><

span

>湖北省武漢市 網友:189****8828

span

>通過提交需求得到了律師幫助

p>

div>

<

div

id="demo2"

>

div>

div>

div>

css**:

#demo div#demo div span

js**:

注意:內容的高度必須大於容器的高度,否則無法滾動

如何實現最簡單的無縫滾動

不沾動態圖了,來這的都知道是個什麼效果 文字無縫滾動 keyframes mymove 100 style head class inner container class text v for text,index in arr key index p div div var vm newvue ...

移動端滾動載入資料實現

模擬場景 移動端上劃到底,載入更多資料。1 本例子基於jquery實現。監聽滾動事件。2 獲取滾動條到文件頂部的距離,上圖scrolltop那段。原生js可用document.documentelement.scrolltop獲取。var scrolltop math.ceil this scrol...

使用rem vw實現簡單的移動端適配

首先設定meta屬性,如下 viewport content width device width,initial scale 1,maximum scale 1,user scalable no 使用如下 就能實現移動端的適配 html100vw相當於瀏覽器的window.innerwidth,是...