vue 純js實現廣告文字滾動 橫向

1.先上效果

本想弄個動態圖的 但是我不會 /(ㄒoㄒ)/~~

那我只能用些替代，向左滾動效果，無限迴圈

2.原理

利用滾動文字的div margin-left實現

一兩句話說不清楚 直接上個草稿（雖然不知道看得吃不吃力）

以上可以看到有2個寬，乙個是視窗的，乙個是文字文字的

根據這2個已知量去動態控制左邊距的量

3.實現

html

class="

companysdl_scrolltext
">
class="
companysdl_scrolltext__item
"ref="
srcolltext
">今日生豬****：1000元/頭 1今日生豬****：今日生豬****：1000元/頭 2今日生豬："
color:red
">**：10%

.companysdl_scrolltext 

::-webkit-scrollbar 
}

1

data () 8},
9methods: 18}
19},
20mounted () , 250)23
this.textwidth = document.defaultview.getcomputedstyle(this.$refs.srcolltext, '').width.split('
px')[0
]24 console.log('
文字寬度
', this
.textwidth)
25})
26 },

獲取文字寬度

document.defaultview.getcomputedstyle(this.$refs.srcolltext, '').width.split('

px')[0]

setinterval(() => , 250)

純JS實現文字上下 漸進 滾動（不是逐行哦）

前言 純js實現文字或新聞豎直方向滾動，先看個案例 主體 1 js獲取數值方向滾動距離selector.scrolltop 2 js獲取元素高度 包含邊框和內邊距 selector.offectheight 3 高度獲取 1 clientheight height 上下padding 內部可視區高度...

Js實現文字水平滾動

公司專案中有乙個公告欄，寫的時候我先想到了用marquee，於是發現了marquee有很多弊端，當文字全部顯示完才出現新的文字，這樣不是很友好，然後一查發現marquee這個標籤已經被w3c標準廢棄了，也就是不再支援使用這個標籤了，於是我便用js css去替代這個寫法，並且做到類似無縫滾動的效果。直...

純css 如何實現文字超出部分橫向滾動

君不見黃河之水天上來，奔流到海不復回，君不見高堂明鏡悲白髮，朝如青絲暮成雪，人生得意須盡歡，莫使金樽空對月 下面解釋原因 首先 這裡的.box被設定了寬度為300px,而由於是塊級元素，所以預設寬度是100 在這裡也就是300px，但是的文字寬度其實是超過300px的，題主設定transform t...