marquee做文字滚动、图片轮播

最忆是

已于 2022-04-11 11:32:50 修改

阅读量1.6k

点赞数

文章标签：前端 vue

于 2022-04-06 17:08:05 首次发布

本文链接：https://blog.csdn.net/summer9826/article/details/123994214

版权

HTML中marquee 元素做文字的滚动 <marquee></marquee>

这个标签已经废弃了，只是尝试一下。不支持代码中使用。

主要用来做公示公告

就像是这种新闻轮播，可以用swiper轮播图来做，比较复杂，marquee非常简单

属性

behavior

设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。 如果未指定值，默认值为 scroll。

bgcolor

通过颜色名称或十六进制值设置背景颜色。

direction

设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。

height

以像素或百分比值设置高度。

hspace

设置水平边距。

loop

设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。

scrollamount

设置每次滚动时移动的长度（以像素为单位）。默认值为 6。

scrolldelay

设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。

truespeed

默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。

vspace

以像素或百分比值设置垂直边距。

width

以像素或百分比值设置宽度。

文字滚动效果

文字滚动，记得设置inline-block属性

<marquee class="marqu"  onMouseOut="this.start()" onMouseOver="this.stop()" style="behavior: scroll; direction: left; scrollmount = 2000 ;scrolldelay = 1000; height: 60px;">
          <div v-for="(item, index) in newsNotice" :key="index" style="display: inline-block; margin-right: 60px;">
            <a  target="_blank" :href="item.url">
              {{item.title}}
            </a>
          </div>
        </marquee>

onMouseOut="this.start()" onMouseOver="this.stop()" 鼠标进入停止滚动，鼠标离开，开始滚动

可以在样式中直接设置滚动方向、方式、时间间隔、速度等属性。

同时，我尝试做图片轮播，效果很好，非常简单，实现无缝轮播，鼠标停止功效非常简单，可以在做简单轮播图是代替swiper。

图片轮播效果

<marquee class="marqu"  onMouseOut="this.start()" onMouseOver="this.stop()" style="behavior: scroll; direction: left; scrollmount = 2000 ;scrolldelay = 1000; ">
        <div v-for="(item, index) in newsNotice" :key="index" style="display: inline-block; margin-right: 60px; width: 300px; height: 250px;">
          <img :src="item.src" style="width: 300px; height: 240px;">
        </div>
      </marquee>

样式写的很随意，就是为了尝试是否能实现效果，完整代码如下：

<template>
  <div class="home">

    <div class="homeNotice clearfloat">
      <div class="fl homeNoticeL" style="color: #000;font-size: 16px;font-weight: 700;">公告</div>
      <div class="homeNoticeBox">
        <marquee class="marqu"  onMouseOut="this.start()" onMouseOver="this.stop()" style="behavior: scroll; direction: left; scrollmount = 2000 ;scrolldelay = 1000; height: 60px;">
          <div v-for="(item, index) in newsNotice" :key="index" style="display: inline-block; margin-right: 60px;">
            <a  target="_blank" :href="item.url">
              {{item.title}}
            </a>
          </div>
        </marquee>
      </div>
    </div>


    <div class="homeNoticeBox2">
      <marquee class="marqu"  onMouseOut="this.start()" onMouseOver="this.stop()" style="behavior: scroll; direction: left; scrollmount = 2000 ;scrolldelay = 1000; ">
        <div v-for="(item, index) in newsNotice" :key="index" style="display: inline-block; margin-right: 60px; width: 300px; height: 250px;">
          <img :src="item.src" style="width: 300px; height: 240px;">
        </div>
      </marquee>
    </div>

  </div>
</template>
<script>
export default {
  name: 'home',
  data(){
    return {
      newsNotice:[
        {
          title: '不知不觉，明媚和绿意早已四处萌生,是春天了啊。',
          time: '2021-02-03',
          id: '1',
          src: require('../assets/img/About_bj.jpg'),
        },
        {
          title: '不知不觉，明媚和绿意早已四处萌生,是春天了啊。',
          time: '2021-10-10',
          id: '2',
          src: require('../assets/img/banner_img5.jpg'),
        },
        {
          title: '不知不觉，明媚和绿意早已四处萌生,是春天了啊。',
          time: '2021-10-10',
          id: '3',
          src: require('../assets/img/banner_img5.jpg'),
        },
      ]

    }
  },
  mounted(){

  },
  methods: {
    
  }
}
</script>

<style>
.homeNotice {
  height: 60px;
  line-height: 60px;
  background-color: #cf0707;
  margin: 30px 0;
  padding: 0 35px;
  text-align: center;
}
.homeNoticeL {
  width: 57px;
    height: 28px;
    overflow: hidden;
    border: solid 1px #f9fd00;
    line-height: 28px;
    margin: 17px 0px 0px 0;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 29px;
}
.homeNoticeBox {
  margin-left: 88px;
  height: 100%;
}
.homeNoticeBox2{
  height: 300px;
  background-color: lightgoldenrodyellow;
  width: 1000px;
  margin: 0 auto;
}
.homeNoticeBox {
    margin-left: 88px;
    height: 100%;
    margin-top: -29px;
}
.homeNoticeBox a{
    color: #fff1a9;
    font-size: 15px;
    text-decoration: none;
}
</style>