一、marquee(文字滚动)标签
marquee简介
<marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。
各个属性参数
- direction 表示滚动的方向,值可以是left,right,up,down,默认为left
- behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
- loop 表示循环的次数,值是正整数,默认为无限循环
- scrollamount 表示运动速度,值是正整数,默认为6
- scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒
- align 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
- bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色
- height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100%
height为标签内元素的高度。 - hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。
- onMouseOver=this.stop() onMouseOut=this.start()
表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。
注意
您也可以将<marquee>和</marquee>之间的内容替换为图像或其它对象等功能。
综合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>marquee</title>
</head>
<body>
<marquee direction="up">我向上滚动</marquee>
<hr>
<marquee direction="down">我向下滚动</marquee>
<hr>
<marquee direction="left">我向左滚动</marquee>
<hr>
<marquee direction="right">我向右滚动</marquee>
<hr>
<marquee scrollamount="10">我速度很慢</marquee>
<hr>
<marquee scrollamount="100">我速度很快</marquee>
<hr>
<marquee scrolldelay="30">我小步前进。</marquee>
<hr>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
<hr>
<marquee loop="1">我滚动一次</marquee>
<hr>
<marquee loop="2">我滚动两次</marquee>
<hr>
<marquee loop="infinite">我无限循环滚动</marquee>
<hr>
<marquee behavior="alternate">我来回滚动</marquee>
<hr>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<hr>
<marquee behavior="scroll" direction="up" height="30">我单方向向上循环滚动</marquee>
<hr>
<marquee behavior="slide">我只滚动一次</marquee>
<hr>
<marquee behavior="slide" direction="up">我向上只滚动一次</marquee>
<hr>
<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>
<hr>
<marquee width="600" height="50" bgcolor="red">我宽300像素,高30像素。</marquee>
<hr>
<marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>
<hr>
<marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>
<hr>
<marquee align="absbottom">绝对底部对齐</marquee>
<hr>
<marquee align="absmiddle">绝对中央对齐</marquee>
<hr>
<marquee align="baseline">底线对齐</marquee>
<hr>
<marquee align="bottom">底部对齐(默认)</marquee>
<hr>
<marquee align="left">左对齐</marquee>
<hr>
<marquee align="middle"> 中间对齐</marquee>
<hr>
<marquee align="right">右对齐</marquee>
<hr>
<marquee align="texttop">顶线对齐</marquee>
<hr>
<marquee align="top">顶部对齐</marquee>
<hr>
<marquee onMouseOver="this.stop()">暂停</marquee>
<hr>
<marquee onMouseOut="this.start()">启动</marquee>
</body>
</html>
二、使用div
1.marquee.vue子组件
<template>
<div class="marquee-wrap">
<div class="scroll">
<p class="marquee">{{text}}</p>
<p class="copy"></p>
</div>
<p class="getWidth">{{text}}</p>
</div>
</template>
<script>
export default {
name: 'marquee',
props: ['val'],
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = setTimeout(() => {
this.move()
clearTimeout(timer)
}, 1000)
},
mounted () {
for (let item of this.val) {
this.text += ' ' + item
}
},
methods: {
move () {
let maxWidth = document.querySelector('.marquee-wrap').clientWidth
let width = document.querySelector('.getWidth').scrollWidth
if (width <= maxWidth) return
let scroll = document.querySelector('.scroll')
let copy = document.querySelector('.copy')
copy.innerText = this.text
let distance = 0
this.timer = setInterval(() => {
distance -= 1
if (-distance >= width) {
distance = 16
}
scroll.style.transform = 'translateX(' + distance + 'px)'
}, 20)
}
},
beforeDestroy () {
clearInterval(this.timer)
}
}
</script>
<style scoped>
.marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 16px;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 16px;
font-family: "微软雅黑 Light";
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
</style>
2.调用
<template>
<div class="container">
<marquee :val="title"></marquee>
</div>
</template>
<script>
import marquee from "@/components/marquee.vue";
export default {
components: {
marquee,
},
data() {
return {
title: "合同签约,预定协议,押金变更",
};
},
};
</script>
<style>
.container{
width: 100px;
}
</style>