文字滚动-走马灯的文字实现(Vue)

最新推荐文章于 2023-11-01 16:44:42 发布

原创最新推荐文章于 2023-11-01 16:44:42 发布 · 784 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

VUE 专栏收录该内容

30 篇文章

订阅专栏

该博客介绍了如何使用JavaScript动态调整div宽度，并实现文字滚动效果。通过监听面包屑宽度变化，实时更新滚动区域宽度，结合CSS样式实现无缝滚动。同时，文章提供了marquee标签的替代实现方式，展示了上下滚动和左右滚动的文字效果。

文字滚动-走马灯的文字实现

JS的实现
marquee 标签

JS的实现

在这里插入图片描述

实时更改div宽度

// 监听面包屑宽度,面包屑宽度改变后会自动改变文字滚动区域宽度
breadCrumbList () {
      this.$nextTick(() => {
        this.windowResize();
        window.onresize = () => {
          this.windowResize()
        }
      })
      return this.$store.state.breadCrumbList;
},

动态获取滚动文字的div宽度

在这里插入图片描述

windowResize () {
	 const headerWidth = document.getElementById('header-bar')?.offsetWidth;
	 const crumbWidth = document.getElementById('custom-bread-crumb')?.offsetWidth;
	 const conWidth = document.getElementById('custom-content-con')?.offsetWidth
	 this.titleWidth = headerWidth - (crumbWidth + conWidth) - 60;
},

实现文字滚动

setScroll () {
  let speed = 10;
  let tab = document.getElementById("notice");
  let tab1 = document.getElementById("notice1");
  let tab2 = document.getElementById("notice2");
  function Marquee () {
    if (tab2.offsetWidth - tab.scrollLeft <= 0) {
      tab.scrollLeft -= tab1.offsetWidth
    }
    else {
      tab.scrollLeft++;
    }
  }
  let MyMar = setInterval(Marquee, speed);
  tab.onmouseover = function () { clearInterval(MyMar) };
  tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
},

html

{{content}} 显示的滚动内容

<template>
  <span class="notice-tip" :style="{width:titleWidth+'px'}">
    <div id="notice">
      <div id="innotice" :style="{color:color}">
      <!--这里是实现的另一种方式 文字上下滚动   direction="up"-->
        <!-- <marquee behavior="scroll" direction="up" :style="{color:color}" :scrollamount="5" :scrolldelay="2" onMouseOut="this.start()" onMouseOver="this.stop()">
          <p v-for="(item,index) in content.split(/。|,/)" :key="index">{{item}}</p>
        </marquee> -->
        <div id="notice1">
          {{content}}
        </div>
        <div id="notice2">
          {{content}}
        </div>
      </div>
    </div>
  </span>
</template>

css

<style scoped lang="less">
.notice-tip {
  height: 40px;
  line-height: 40px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background-color: #fffff7;
}
#notice {
  overflow: hidden;
}

#innotice {
  float: left;
  width: 100%;
  height: 40px;
}
#notice1 {
  float: left;
}
#notice2 {
  float: left;
}

#innotice {
  margin-top: 0px;
  font-size: 0.96rem;
  margin-left: 21px;
  /deep/ p {
    text-align: center;
  }
}
</style>

marquee 标签

<marquee behavior="scroll" direction="up" :style="{color:color}" :scrollamount="5" :scrolldelay="2" onMouseOut="this.start()" onMouseOver="this.stop()">
	<p v-for="(item,index) in content.split(/。|,/)" :key="index">{{item}}</p>
</marquee>