首先實現效果，當時的需求做的系統公告框設定一個寬度，超寬滾動播放，沒超寬則靜態展示，
有了需求，想了下實現原理，最開始打算js更改字體內容的方式，但是想了下感覺會有點麻煩，想起之前做了表格的左側邊固定，是利用了將表格分層兩部分，滾動的時候通過translate來移動了表格的位置，實現的半邊滾動，半邊移動，這種辦法可以用在我們這里，這樣就實現了代碼的橫向滾動，這下就剩下無縫鏈接。
既然是用translate實現的滾動，我們可以在滾動前做好排版，將一個內容一樣的div塊緊貼在內容塊后面一起滾動，並且在當前條滾動完后，恢復初始位置，且此位置必須與剛開始滾動前的位置像重合，看起效果就是滾動的無縫鏈接，
廢話不多說下面直接貼代碼，我盡量在代碼注釋里寫進各部分功能，這里就不詳細介紹
顯示html部分
<template>
<div id="mar">
<!--主div分三部分，圖標，系統公告名字，展示區域-->
<div class="header">
<!--圖標-->
<img src="../../../static/img/notification.png">
<!--名字-->
<span class="announcement">系統公告：</span> </div>
<!--公告展示塊-->
<div class="PackagingShell" id="PackagingShell">
<!--主題內容，展示內容區域-->
<div id="viewBox">
<!--文本主體-->
<span id="marquee">{{text}}</span>
<!--文本副本，實現無縫滾動-->
<span id="transcript" ></span>
</div>
<!--隱藏塊，用於獲取展示文本寬度-->
<div id="hide">{{text}}</div>
</div>
</div>
</template>
<style scoped lang="scss">
#mar {
/*系統公告字體顏色*/
.announcement{
color:#ff4786;
}
height:40px;
line-height: 40px;
/*公告滾動盒子樣式*/
.PackagingShell {
width: 89%; /*滾動部分寬度*/
overflow: hidden; /*超出部分隱藏*/
font-size: 12px;
color: #111;
}
/*主題內容塊設置*/
#viewBox {
/*設置內容框不可換行,確保兩個div塊始終在同一行*/
white-space: nowrap;
}
/*內容塊設置*/
#marquee {
/*設置內容塊不可換行*/
white-space: nowrap;
}
/*獲取寬度的塊，用z-index隱藏*/
#hide {
position: absolute;
z-index: -999;
top: -9999px;
white-space: nowrap;
}
/*浮動設置和圖片設置*/
.header {
float: left;
font-size:12px;
>img{
vertical-align: middle;
}
}
}
</style>
接下來是比較關鍵的js 部分，主要的位移對比代碼都在這里
<script> import {getHomepageMessage} from '@/api/getdata' export default { name: 'Marquee', data () { return { text: '', // 內容 textWidth: 0, // 字符長度 isScroll: false // 是否滾動 } }, methods: { init () { // 初始化函數 getHomepageMessage().then((response) => { // 接口請求 if (response.body.code !== '0000') { return } // this.text = response.body.data[0].messageContent // 滾動內容賦值 this.text = '滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試滾動無縫鏈接測試' }) .catch((response) => { console.log(response, 'error') }) }, move () { // 首先獲取整個內容的寬度,(展示內容會超出隱藏,無法通過獲取盒子寬度取到實際的內容寬度) // 所以專門造了一個 div 塊來放內容,隱藏起來 (無法用根據字體內容來計算寬度的方法,存在誤差,當內容較多 // 的時候誤差會相對較大) let width = document.getElementById('hide').getBoundingClientRect().width // 獲取展示塊盒模型寬度 let BoxWidth = document.getElementById('PackagingShell').offsetWidth // 獲取內容展示寬 let viewBox = document.getElementById('viewBox') // 判斷內容是否超長 if ((BoxWidth - width) < 0) { // 內容超長,則獲取抄本元素 let transcript = document.getElementById('transcript') // 抄本元素內容填充 transcript.innerText = this.text // 設定抄本和主題之間的間距 transcript.style.marginLeft = '200px' } else { // 沒有超長則return,不做任何操作 return } // 設置初始位移距離 let distance = 0 // 移動函數,通過定時器實現 setInterval(function () { // 位移內用記錄是是遞減,此處的 1 控制移動變量 s distance = distance - 1 // 判斷是否整個內容移動完 if (-distance >= width) { // 若移動完,則重新設定位移值,此處賦值200是正好把 上面設置的塊間距 200px 也加入移動范圍,實現移動完無縫跳轉 distance = 200 } // 實時設置位移距離 viewBox.style.transform = 'translateX(' + distance + 'px)' }, 27) // 移動時間間隔t s和t 共同決定移動速度 } }, mounted () { // 初始化 this.init() }, // 更新的時候運動 updated: function () { this.move() } } </script>
因為項目把所有api獨立出去了，所以若果你直接復制是無法使用，
但是只需要在init 初始化函數里將其它內容刪除，只留 給this.text 賦值的內容就行！
js部分的描述我全寫在了注釋里，這里就不單獨講一遍了
---------------------
作者：高數定積分
原文：https://blog.csdn.net/qq_43192782/article/details/85322971
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！