javascript 不间断滚动marquee

发布网友发布时间：2022-04-25 13:13

共4个回答

热心网友时间：2022-04-19 10:08

我自己写的一段代码，已经注释得非常清楚了，运行例子后你就会清楚的明白是怎么回事
<style>
#demo{overflow: hidden;
WIDTH: 70px; /*显示区域的宽度*/
height: 50px;
border:solid 1px #222222;
align:center;
margin:auto;
}
#demo1 { background: yellow} /*这里是帮助你理解特地加的底色，删去后你就清楚*/
#demo2 { background: red}
p{/*内部滚动条*/
border:solid 2px blue;
width:270px;
margin:5px 0;
}
</style>

<div id="demo" >
<p>
<span id="demo1" >
aaaaaabbbcccccc
</span>
<span id="demo2" >
aaaaaabbb
</span>
</p>
</div>

<script>
function Marquee(){
if(demo1.offsetWidth<=demo.scrollLeft) //当demo1完全滚出显示区域时
demo.scrollLeft=0 //让内部滚动条p回归原位，造成连续滚动假象
else{
demo.scrollLeft++ //让demo的内部滚动条继续向左滚动1px
}
}
var MyMar=setInterval(Marquee,5)
demo.onmouseover=function() {clearInterval(MyMar)} //当鼠标放在div元素上面时，清除下面的定时执行功能
demo.onmouseout=function() {MyMar=setInterval(Marquee,5)} //每5毫秒执行一次让demo1向左偏移1px的函数
</script>

热心网友时间：2022-04-19 11:26

在一个div里面放一个span，span里面放你要滚动的文字。
利用javascript的计时器，不断更新span的位置。
span跑到头了，重新设置初始位置。
不断循环就行了。

热心网友时间：2022-04-19 13:01

<html>
<head>
<style type="text/css">
#div1{height:50px;overflow:hidden;}/*这个一定要有，否则就全显示了*/
</style>
</head>
<body onload="onload1();">
<div id="div1">
<div id="div2">test<br/>test<br/>test<br/></div>
<div id="div3"></div>
</div>
<script language="javascript" type="text/ecmascript">
function onload1()
{
var speed=50;
div3.innerHTML=div2.innerHTML;//重复显示
function Marquee () {
if (div3.offsetTop<=div1.scrollTop)
{
div1.scrollTop-=div2.offsetHeight;// div2被完全吞没，重置。
}
else
{
div1.scrollTop++;//滚动，这是div2和div3是上升的。
}
}
var MyMar=setInterval(Marquee,speed);
div1.onmouseover=function() { clearInterval(MyMar); }//滚动停止
div1.onmouseout=function () { MyMar=setInterval (Marquee,speed) }//滚动重开
}
</script>
</body>
</html>

热心网友时间：2022-04-19 14:52

marquee跟不用不着 js 只要marquee就了直接在你要滚动的文字图片视频等等两边加的 marquee标签就行了
<marquee>这行字在滚动</marquee>