一、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').clientWidthlet width = document.querySelector('.getWidth').scrollWidthif (width <= maxWidth) returnlet scroll = document.querySelector('.scroll')let copy = document.querySelector('.copy')copy.innerText = this.textlet distance = 0 this.timer = setInterval(() => {distance -= 1if (-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>
