js如何實現信息上下無縫滾動

⑸ css怎麼實現文字無縫上下滾動

155156157158159!DOCTYPEhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/title向上下左右不間斷無縫滾動效果(兼容火狐和IE)/title/headbodydivid="colee"style="overflow:hidden;height:253px;width:410px;"divid="colee1"p此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/p/divdivid="colee2"/div/divscriptvarspeed=30;varcolee2=document.getElementById("colee2");varcolee1=document.getElementById("colee1");varcolee=document.getElementById("colee");colee2.innerHTML=colee1.innerHTML;//克隆colee1為colee2functionMarquee1(){//當滾動至colee1與colee2交界時if(colee2.offsetTop-colee.scrollTop=0){colee.scrollTop-=colee1.offsetHeight;//colee跳到最頂端}else{colee.scrollTop++}}varMyMar1=setInterval(Marquee1,speed)//設置定時器//滑鼠移上時清除定時器達到滾動停止的目的colee.onmouseover=function(){clearInterval(MyMar1)}//滑鼠移開時重設定時器colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}/script!--向上滾動代碼結束--!--下面是向下滾動代碼--divid="colee_bottom"style="overflow:hidden;height:253px;width:410px;"divid="colee_bottom1"pimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/divdivid="colee_bottom2"/div/divscriptvarspeed=30varcolee_bottom2=document.getElementById("colee_bottom2");varcolee_bottom1=document.getElementById("colee_bottom1");varcolee_bottom=document.getElementById("colee_bottom");colee_bottom2.innerHTML=colee_bottom1.innerHTMLcolee_bottom.scrollTop=colee_bottom.scrollHeightfunctionMarquee2(){if(colee_bottom1.offsetTop-colee_bottom.scrollTop=0)colee_bottom.scrollTop+=colee_bottom2.offsetHeightelse{colee_bottom.scrollTop--}}varMyMar2=setInterval(Marquee2,speed)colee_bottom.onmouseover=function(){clearInterval(MyMar2)}colee_bottom.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)}/script!--向下滾動代碼結束--!--下面是向左滾動代碼--divid="colee_left"style="overflow:hidden;width:500px;"tablecellpadding="0"cellspacing="0"border="0"trtdid="colee_left1"valign="top"align="center"tablecellpadding="2"cellspacing="0"border="0"tralign="center"tdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/td/tr/table/tdtdid="colee_left2"valign="top"/td/tr/table/divscript//使用div時，請保證colee_left2與colee_left1是在同一行上.varspeed=30//速度數值越大速度越慢varcolee_left2=document.getElementById("colee_left2");varcolee_left1=document.getElementById("colee_left1");varcolee_left=document.getElementById("colee_left");colee_left2.innerHTML=colee_left1.innerHTMLfunctionMarquee3(){if(colee_left2.offsetWidth-colee_left.scrollLeft=0)//offsetWidth是對象的可見寬度colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth是對象的實際內容的寬，不包邊線寬度else{colee_left.scrollLeft++}}varMyMar3=setInterval(Marquee3,speed)colee_left.onmouseover=function(){clearInterval(MyMar3)}colee_left.onmouseout=function(){MyMar3=setInterval(Marquee3,speed)}/script!--向左滾動代碼結束--!--下面是向右滾動代碼--divid="colee_right"style="overflow:hidden;width:500px;"tablecellpadding="0"cellspacing="0"border="0"trtdid="colee_right1"valign="top"align="center"tablecellpadding="2"cellspacing="0"border="0"tralign="center"tdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/td/tr/table/tdtdid="colee_right2"valign="top"/td/tr/table/divscriptvarspeed=30//速度數值越大速度越慢varcolee_right2=document.getElementById("colee_right2");varcolee_right1=document.getElementById("colee_right1");varcolee_right=document.getElementById("colee_right");colee_right2.innerHTML=colee_right1.innerHTMLfunctionMarquee4(){if(colee_right.scrollLeft=0)colee_right.scrollLeft+=colee_right2.offsetWidthelse{colee_right.scrollLeft--}}varMyMar4=setInterval(Marquee4,speed)colee_right.onmouseover=function(){clearInterval(MyMar4)}colee_right.onmouseout=function(){MyMar4=setInterval(Marquee4,speed)}/script!--向右滾動代碼結束--/body/html常用JS圖片、文字滾動（...大小：1.41K 已經過網路安全檢測,放心下載點擊下載

追問

這是JS的代碼？我要的HTML的

⑹ 關於如何使用js不斷循環上下滾動

我一般的解決方法就是，重復循環要滾動的內容，比如裡面有5張圖片吧，把這張圖片連續放3次，也就相當於展示15張圖，滾動的內容多，一般情況下就不會停止不動了。

⑺ 求助！如何用js讓新聞滾動無限循環，無縫對接

在網路上搜索 懶人圖庫 裡面有 無縫滾動

⑻ 用js代碼，文字怎樣在網頁上實現上或下滾動

<marqueeonMouseOver=this.stop()
onMouseOut=this.start()scrollamount=1
scrolldelay=7direction=upwidth=270
height=77>滾動的文字
</marquee>

⑼ 通過js實現圖片的無縫滾動時，怎麼才能使它向上沒有間距，我從網上看的一些代碼可以使圖片無縫滾動但是...

這個是通過CSS來控制的。

一般是 修改 padding 或者 margin 的值。

比如使用ul 製作的圖片內列表

HTML 代碼：容
<ul id="ScrollMe">
<li><a href="#"><img src="images/1.jpg" width="120" height="90" /></a></li>
<li><a href="#"><img src="images/1.jpg" width="120" height="90" /></a></li>
<li><a href="#"><img src="images/1.jpg" width="120" height="90" /></a></li>
</ul>

CSS代碼：
#ScrollMe li { padding:0; margin:0;}

⑽ 使用JS如何實現文字無縫滾動

<!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:800px;height:500px;margin:200px auto 0;position: relative;border:1px solid #000;overflow: hidden;}
h1{position: absolute;left:800px;word-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>
純手敲 覺得有用可以點個贊啊