导航:首页 > 无缝钢管 > 怎么实现div文字无缝滚动

怎么实现div文字无缝滚动

发布时间:2023-03-21 00:33:27

『壹』 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的

『贰』 怎样设置li标记或者div的左右无缝滚动

用表格的好处就是不管多少格都不会换行,用DIV的话超出边界就换行了,没有效果。这没有办法只有将就一下了,还是期待高手吧。

『叁』 html中怎么实现无缝滚动

给你个例子吧,我这里运行很好,你根据你的需要进行适当的调整应该就可以用的。祝福你!
<div id="demo" style="overflow:hidden;height:141px;width:164px; text-align:left;" onmouseover="clearInterval(MyMar2);" onmouseout="MyMar2=setInterval(Marquee2,speed2);">
<div id="demo1">
<div align="left">滚动内容 <br><br>
</div><br><br>
</div>
<div id="demo2"></div>
</div>

<script>
var speed2=30;
demo2.innerHTML=demo1.innerHTML
function Marquee2()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else
demo.scrollTop++;
}
var MyMar2=setInterval(Marquee2,speed2);
</script>
</div>

『肆』 HTML 无缝文字滚动怎么做

上下无缝滚动代码:
<div id="demo" style="height:50px;overflow:hidden;">
<div id="indemo" style="height:200%;">
<div id="demo1">
第一行字<br />
第二行字
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
speed = 100; //数字越大滚得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee(){
if (tab.scrollTop >= tab1.offsetHeight) {
tab.scrollTop-=tab2.offsetHeight;
}else{
tab.scrollTop+=1;
}
}
var MyMar=setInterval(Marquee,speed);
</script>

左右横向无缝滚动代码

<table cellSpacing=0 cellPadding=0 width=100 align=center border=0>
<tr>
<td width=190 bgColor=#d6f6fd height=27></td>
<td bgColor=#d6f6fd height=27>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2 scrollDelay=60 width=580 height=20>
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">横向滚动的广告效果 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">横向滚动的广告效果2 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">横向滚动的广告效果3 [ 7/10/2012]
</marquee>
</td>
</tr>
</table>

阅读全文

与怎么实现div文字无缝滚动相关的资料

热点内容
不锈钢锅熏黑了怎么弄 浏览:571
如何认可供应商的模具 浏览:494
不锈钢316l耐多少氯离子 浏览:384
高频焊管的原材料是什么 浏览:588
九米长阳台怎么装防护栏 浏览:519
重庆哪里有做砖机模具 浏览:697
苏州树脂模具哪里有卖 浏览:863
如何加强焊接管控 浏览:681
不锈钢氮化有什么要求 浏览:660
撞到高速公路护栏怎么处罚 浏览:165
锌铝合金和熟铁哪个贵点 浏览:639
铝合金窗扇怎么装上去视频 浏览:163
钢铁是怎样炼成的中保尔夺枪的目的是什么 浏览:18
铝合金铁锅破了怎么办 浏览:460
热镀锌方管一米多重 浏览:978
钢管的弯扁厚度是指什么 浏览:673
定额内含什么钢筋连接 浏览:469
围挡的钢管套什么定额 浏览:576
韶关钢铁集团怎么样 浏览:574
自己如何做工艺品模具 浏览:548