使用JS如何实现文字无缝滚动

JavaScript020

使用JS如何实现文字无缝滚动,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

.wrap{width:800pxheight:500pxmargin:200px auto 0position: relativeborder:1px solid #000overflow: hidden}

h1{position: absoluteleft:800pxword-break: keep-all}

</style>

<body>

<div class="wrap">

<h1>这是无缝滚动</h1>

<h1>这是无缝滚动</h1>

</div>

<script>

var wenzi=document.querySelectorAll("h1")

var speed1=0

var speed2=0

var flag=false

setInterval(function(){

speed1-=10

wenzi[0].style.left=800+speed1+"px"

wenzi[1].style.left=800+speed2+"px"

if(wenzi[0].offsetLeft==0){

flag=true

}

if(flag){

speed2-=10

}

if(wenzi[0].offsetLeft==0){

speed2=0

}

if(wenzi[1].offsetLeft==0){

speed1=0

}

},60)

</script>

</body>

</html>

纯手敲 觉得有用可以点个赞啊

无缝滚动通常采用一个源版块，一个复制版块，两块并排合成一个主体，在一个较小范围的母版块里并排滚动。假设向上滚动那么js每隔几十毫秒设置主体头部减一js判断当版块2的头部减母版块的头部小于等于零时就设置版块主体头部等零，这样就实现了一个循环如果你的判断有误或者错误赋值或者这个主体总长还没有母版块长就会失灵。

<div id="scroll_div" class="ks_pic">

<div style="height:6000000px">

<div id="scroll_begin" style="float:left" >

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

</div>

<div id="scroll_end" style="float:left" ></div></div>

</div>

<script>

function ScrollImgLeft(){

var speed=20,

doc=document,

scroll_begin = doc.getElementById("scroll_begin"),

scroll_end = doc.getElementById("scroll_end"),

scroll_div = doc.getElementById("scroll_div")

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee(){

if(scroll_end.offsetHeight-scroll_div.scrollTop<=0)

scroll_div.scrollTop-=scroll_begin.offsetHeight

else

scroll_div.scrollTop++

}

var MyMar=setInterval(Marquee,speed)

scroll_div.onmouseover=function() {clearInterval(MyMar)}

scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

}

ScrollImgLeft()

</script>