需求

最新項目需要一個文字橫向滾動效果，

vue 文字橫向無縫走馬燈組件

寫的很詳細，記錄下來，廣播出去。

解決方案

1、 HTML

先建一個div層作為公告顯示區，里面包裹一個公告列表(ul);

2、 CSS

每條公告信息(li)的margin必須設置‘px’單位，否則要轉換，后面js中回到起點還要用到這個值。

body,div,html,img,li,ul{margin:0;padding:0;border:0}

li{list-style:none}

.advert-top{position:relative;display:flex;width:100%;height:.88rem;background:linear-gradient(270deg,rgba(80,175,255,1) 0,rgba(13,132,248,1) 48%,rgba(55,159,248,1) 86%,rgba(81,176,255,1) 100%);color:#fff;font-size:.26rem;align-items:center}

.ico-horn{display:flex;width:.88rem;height:.88rem;justify-content:center;align-items:center}

.ico-horn>img{width:.32rem;height:.32rem}

/* 以下代碼與滾動相關 */

.marquee-wrap{position:relative;display:flex;overflow:hidden;width:100%;height:100%}

.marquee-box{position:absolute;top:50%;display:flex;white-space:nowrap;transform:translateY(-50%)}

.marquee-list{margin-right:10px} /* 此處“px”方便回到起點 */

.marquee-list span{padding:0 .04rem;color:#ffe17b;font-weight:700}

3、 JavaScript

var vm = new Vue({

el: '#app',

data: {

ico_horn: 'https://img.alicdn.com/tfs/TB1zwftaPrguuRjy0FeXXXcbFXa-16-16.png',

message: "全球新冠肺炎確診病例超45萬，死亡人數破2萬！",

},

mounted: function () {

// 延時滾動

setTimeout(() => {

this.runMarquee()

}, 1000)

},

methods: {

runMarquee() {

// 獲取文字 計算后寬度

var width = document.getElementById('marquee').getBoundingClientRect().width,

marquee = document.getElementById('marquee-box'),

disx = 0; // 位移距離

//設置位移

setInterval(() => {

disx--; // disx-=1; 滾動步長

if (-disx >= width) {

disx = 10; // 如果位移超過文字寬度，則回到起點 marquee-list的margin值

}

// marquee.style.transform = 'translateX(' + disx + 'px)'

marquee.style.left = disx + 'px'

}, 30) //滾動速度

}

}

});

// JavaScript Document

(function px2rem(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

/*

* 100 -> html,body { font-size:100px; }

* 750 -> 此處以 iPhone6 兩倍設計稿 寬度750px 布局頁面

* 根據具體情況改變這兩個數值

*/

};

if (!doc.addEventListener) return;

// 窗口大小發生變化，初始化

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

//防止在html未加載完畢時執行，保證獲取正確的頁寬

setTimeout(function () {

px2rem(doc, win);

}, 200);

})(document, window);

總結

以上是生活随笔為你收集整理的vue内容横向循环滚动_vue文字横向滚动公告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。