走马灯

效果类似：(抱歉，图片是静态的) 写一段html，需要走马灯上下跳动的内容，但每次只显示一行： <hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/> <div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;"> • <a href="/" target="_blank">测试第一行</a> <br/> • <a href="/" target="_blank">测试第二行</a> <br/> • <a href="/" target="_blank">测试第三行</a> <br/> • <a href="/" target="_blank">测试第四行</a> <br/> • <a href="/" target="_blank">测试第五行</a> <br/> </div> */ /*--> */ 实现走马灯效果的简单JS： /*开始走马灯*/ function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){ var t; var p=false; var o

<template> <div class="line_one" :style="barrageIsShow?'opacity:1':'opacity:0'" v-if="barrageList"> <div class="swiper-container swiper-container1 swiper-no-swiping"> <div class="swiper-wrapper"> <div class="swiper-slide" style="width:80%;" v-for="(item,index) in barrageList" :key="index" > <div class="item"> <div class="item_box"> <div class="item_main"> <img :src="item.image" alt /> <dl> <dt>{{item.nickname}}</dt> <dd>{{item.content}}</dd> </dl> </div> </div> </div> </div> </div> </div> </div> </template> <script> import Swiper from "swiper"; import "swiper/dist/css/swiper.min.css"; export

实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示： 滚动的文字 　　适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子： 　　1、左右弹来弹去的跑马灯 弹来弹去跑马灯! 　　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。 　　源码粘贴框： <marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee> 　　２、跑的很快的跑马灯 跑的很快跑马灯!　 　　只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。 　　３、带有超级链接的跑马灯 　　实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee><