我们今天要实现的是字体上下无缝滚动的效果。 在友情链接部分，2345提供了大量的链接，并通过定时无缝滚动让内容在窗口中显示。 这里我也记下这个函数。 当页面加载时，链接在输入时自动无缝向上滚动，当鼠标悬停在其上时滚动停止。
首先我们来实现字幕的滚动效果。 一般如果有多个单条数据滚动html滚动条代码，比较简单的方法是使用css实现滚动。 通过动画和@keyframes的配合可以快速实现滚动，但是这时候就会出现问题。 问题是滚动到最后一条的时候会自动跳到第一条，中间会有空隙，所以用这个方法的时候最好把第一条数据复制过来放最后，然后通过 animation-fill-mode: forwards; 动画重置为第一帧，以便可以无缝滚动。
.linkContent {
width: 90%;
height: 20px;
animation: move 3s infinite 2s running;
animation-fill-mode: forwards;
}
@keyframes move {
0% {
transform:translatey(0px);
}
100% {
transform:translateY(-20px);
}
}
这里我的数据是通过p标签遍历a标签得到的，所以每一行有很多个a标签，具体个数和内容的长度有关，所以复制第一个是不可能的，所以这个方法是不适合我这里使用，所以这里就用js来实现吧。 为了更好的获取元素的位置，这里对HTML稍做改动，在列表下方添加了ap标签，方便定位。
接下来开始写方法，在methods中写一个paly方法，通过document.getElementById获取当前元素，这里scrollTop获取选中元素的垂直滚动条位置html滚动条代码，offsetHeight获取控件本身的高度，然后设置一个定时器，给定一个速度时间，实现自动无缝滚动的效果。
play () {
var speed = 100;
var wrapper = document.getElementById('wrapper');
var demo1 = document.getElementById('demo1');
var demo2 = document.getElementById('demo2');
demo2.innerHTML=demo1.innerHTML
console.log(demo2.innerHTML)
function Marquee(){
if(demo2.offsetHeight-wrapper.scrollTop<=0)
wrapper.scrollTop-=demo1.offsetHeight;
else{
wrapper.scrollTop+=1
}
}
var MyMar=setInterval(Marquee,speed)
wrapper.onmouseover=function() {clearInterval(MyMar)}
wrapper.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
},
因为操作是获取当前DOM元素，所以这里要等页面加载完成后才能执行滚动操作，所以这里只调用了mounted()中的paly方法，忘了在.linkContent中加上overflow：隐; 属性。
mounted(){
this.play();
},
这是结合 JavaScript 语法的无缝文本滚动效果。 虽然达到了预期，但是我现在用的是vue。 我还是想用vue来实现这个功能，但是还没研究，主要是我的a标签数据。 全部包裹在p标签中，即每一行的数据和内容都不确定，所以只能通过将div移到p标签外来实现功能。 我想知道是否有人可以给我一些指示。
admin