1.无缝滚动
<div id="demo">
<ul id="demo1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed=40
// 向上滚动
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop>=demo1.offsetHeight){
demo.scrollTop=0;
}
else{
demo.scrollTop=demo.scrollTop+1;
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
//向下滚动
// demo2.innerHTML=demo1.innerHTML
// demo.scrollTop=demo.scrollHeight
// function Marquee2(){
// if(demo1.offsetTop-demo.scrollTop>=0)
// demo.scrollTop+=demo2.offsetHeight
// else{
// demo.scrollTop--
// }
// }
// var MyMar2=setInterval(Marquee2,speed)
// demo.οnmοuseοver=function() {clearInterval(MyMar2)}
// demo.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
2.间歇滚动
<ul id="slider1">
<li>111</li><li>222</li><li>333</li>
</ul>
//jq方法
sliderText:function(){
var flag=true;
function slider(){
if(flag){
$("#slider1").animate({
marginTop: "-22px"
}, 1000, function () {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
})
}
}
setInterval(slider,4000);
$("#slider1").mouseover(function(){
flag = false;
})
$("#slider1").mouseout(function(){
flag = true;
})
}
//vue中间歇滚动
<ul id="slider1" :class="{marquee_top:animate}">
<li v-for="(item,index) in marqueeList" key="index">{{item.name}}</li>
</ul>
<script>
export default {
data() {
return {
animate: false,
marqueeList: [
{
name: "1军电视剧烦恼是的空间开发"
},
{
name: "2军水电费了羧甲淀粉钠盛开"
},
{
name: "3军第三方库收到货否"
},
{
name: "4军杜师傅iOS"
}
]
}
},
created: function() {
// 页面显示
setInterval(this.showMarquee, 2000);
},
methods: {
showMarquee: function() {
this.animate = true;
setTimeout(() => {
this.marqueeList.push(this.marqueeList[0]);
this.marqueeList.shift();
this.animate = false;
}, 500);
}
}
}
</script>
<style>
//这个CSS非常重要,否则无法看到过渡效果
.marquee_top {
transition: all 0.5s;
margin-top: -30px;
}
</style>