const text = document.getElementsByClassName("text")[0] ?// 文本
const textWidth = text.clientWidth ?// 文本的總寬度
const tranTime = textWidth / 50 ?// 根據(jù)文本寬度設(shè)置過渡時(shí)間
text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過渡屬性

2. 要想持續(xù)滾動(dòng)需要重復(fù)觸發(fā)滾動(dòng)的事件

解決方案：通過上文的過渡時(shí)間設(shè)定一個(gè)重復(fù)時(shí)間

原生js表示如下：

const againTime = tranTime * 1000 + 1000 ?// 重新開始滾動(dòng)時(shí)間計(jì)算(動(dòng)態(tài))
// 開始滾動(dòng)
? ? function textRoll() {
? ? ? // 滾動(dòng)操作
? ? ? // ``````
? ? ? setTimeout(() => {
? ? ? ? textRoll()
? ? ? }, againTime);
? ? }

3. 接下來實(shí)現(xiàn)文本滾動(dòng)效果

1) 先將文本設(shè)定在容器最右側(cè)

2) 為文本綁定設(shè)定好的過渡屬性，例：transition: left 10s linear

3) 因?yàn)橛羞^渡屬性，此時(shí)再將文本設(shè)定到容器最左側(cè)，就會(huì)產(chǎn)生一個(gè)從右向左的移動(dòng)的過渡

原生js表示如下：

function textRoll() {
? ? ? text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過渡屬性
? ? ? text.style.left = -textWidth + "px" ?// 向容器最左移動(dòng)
? ? ? setTimeout(() => {
? ? ? ? setTimeout(() => {
? ? ? ? ? textRoll()
? ? ? ? }, 0);
? ? ? }, againTime);
? ? }

4.到目前就能有一次完整的滾動(dòng)了，接下來是定義重新滾動(dòng)

讓文本回到容器最右側(cè)，但是目前文本已經(jīng)有過渡屬性了，如果改變其left會(huì)導(dǎo)致他從左向右滾動(dòng)，所以要先清除過渡屬性，再改變其left到容器最右側(cè)，然后用一開始設(shè)定的再次滾動(dòng)時(shí)間綁定定時(shí)器

function textRoll() {
? ? ? text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過渡屬性
?
? ? ? text.style.left = -textWidth + "px" ?// 向容器最左移動(dòng)
?
? ? ? setTimeout(() => {
? ? ? ? // 還原文本位置
? ? ? ? text.style.transition = "" ?// 還原前需清除過渡
? ? ? ? text.style.left = wrapperWidth + "px"
? ? ? ? setTimeout(() => {
? ? ? ? ? textRoll()
? ? ? ? }, 0);
? ? ? }, againTime);
? ? }

三、js版本源碼

<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>跑馬燈</title>
? <style>
? ? * {
? ? ? margin: 0;
? ? ? padding: 0;
? ? }
?
? ? body {
? ? ? height: 100vh;
? ? ? display: flex;
? ? ? justify-content: center;
? ? ? align-items: center;
? ? }
?
? ? .wrapper {
? ? ? width: 60%;
? ? ? height: 30px;
? ? ? background-color: #000;
? ? ? overflow: hidden;
? ? ? position: relative;
? ? }
?
? ? .text {
? ? ? color: #fff;
? ? ? white-space: nowrap;
? ? ? line-height: 30px;
? ? ? position: absolute;
? ? }
? </style>
</head>
<body>
? <div class="wrapper">
? ? <div class="text">如何四紀(jì)為天子，不及盧家有莫愁。</div>
? </div>
?
? <script>
? ? const wrapper = document.getElementsByClassName("wrapper")[0] ?// 容器
? ? const text = document.getElementsByClassName("text")[0] ?// 文本
?
? ? const wrapperWidth = wrapper.clientWidth ?// 容器的總寬度
? ? const textWidth = text.clientWidth ?// 文本的總寬度
?
? ? text.style.left = wrapperWidth + "px" ?// 開始滾動(dòng)前設(shè)定文本在容器最右側(cè)以外
? ? const tranTime = textWidth / 50 ?// 根據(jù)文本寬度設(shè)置過渡時(shí)間
? ? const againTime = tranTime * 1000 + 1000 ?// 重新開始滾動(dòng)時(shí)間計(jì)算(動(dòng)態(tài))
?
? ? setTimeout(() => {
? ? ? textRoll()
? ? }, 0);
?
? ? // 開始滾動(dòng)
? ? function textRoll() {
? ? ? text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過渡屬性
?
? ? ? text.style.left = -textWidth + "px" ?// 向容器最左移動(dòng)
?
? ? ? setTimeout(() => {
? ? ? ? // 還原文本位置
? ? ? ? text.style.transition = "" ?// 還原前需清除過渡
? ? ? ? text.style.left = wrapperWidth + "px"
? ? ? ? setTimeout(() => {
? ? ? ? ? textRoll()
? ? ? ? }, 0);
? ? ? }, againTime);
? ? }
? </script>
</body>
</html>

四、Vue組件源碼

<template>
? <div class="mobile-marquee">
? ? <img src="~assets/img/home/notice/notice.png" alt="" />
? ? <div class="mobile-marquee-wrapper" ref="wrapper">
? ? ? <div
? ? ? ? class="mobile-marquee-text"
? ? ? ? ref="text"
? ? ? ? :style="{ 'left': textLeft, 'transition': textTransition }"
? ? ? >
? ? ? ? {{ text }}
? ? ? </div>
? ? </div>
? </div>
</template>
?
<script>
export default {
? data() {
? ? return {
? ? ? text:
? ? ? ? "海外徒聞更九州，他生未卜此生休。 空聞虎旅傳宵柝，無復(fù)雞人報(bào)曉籌。 此日六軍同駐馬，當(dāng)時(shí)七夕笑牽牛。 如何四紀(jì)為天子，不及盧家有莫愁。",
? ? ? url: "",
? ? ? textLeft: "",
? ? ? textTransition: ""
? ? };
? },
? methods: {
? ? // 跑馬燈運(yùn)作
? ? marquee() {
? ? ? const _this = this
? ? ? const wrapperWidth = this.$refs.wrapper.clientWidth; // 容器的總寬度
? ? ? const textWidth = this.$refs.text.clientWidth; // 文本的總寬度
? ? ? const transTime = textWidth / 50; // 根據(jù)文本寬度設(shè)置過渡時(shí)間
? ? ? const againTime = transTime * 1000 + 1000; // 重新開始滾動(dòng)時(shí)間計(jì)算(動(dòng)態(tài))
?
? ? ? this.textLeft = wrapperWidth + "px"; // 開始滾動(dòng)前設(shè)定文本在容器最右側(cè)以外
? ? ??
? ? ? setTimeout(() => {
? ? ? ? textRoll()
? ? ? }, 0);
?
? ? ? function textRoll() {
? ? ? ? _this.textTransition = "left " + transTime + "s linear"; // 滾動(dòng)前綁定過渡屬性
? ? ? ? _this.textLeft = -textWidth + "px"; // 向容器最左移動(dòng)
? ? ? ? setTimeout(() => {
? ? ? ? ? // 還原文本位置
? ? ? ? ? _this.textTransition = "none"; // 還原前需清除過渡
? ? ? ? ? _this.textLeft = wrapperWidth + "px";
? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? textRoll();
? ? ? ? ? }, 0);
? ? ? ? }, againTime);
? ? ? }
? ? },
? },
? mounted() {
? ? this.marquee();
? }
};
</script>
?
<style>
.mobile-marquee {
? display: flex;
? align-items: center;
? height: 40px;
? margin: 0 16px;
}
?
.mobile-marquee-wrapper {
? flex: 1;
? height: 40px;
? overflow: hidden;
? position: relative;
}
?
.mobile-marquee img {
? width: 14px;
? height: 12px;
? margin-right: 7px;
}
?
.mobile-marquee-text {
? color: #333;
? white-space: nowrap;
? line-height: 40px;
? position: absolute;
}
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: