Html中实现滚动新闻无间隔限制的代码如何写，比如上下滚动是首尾相接。_随笔

你说的是不是走马灯的效果？直接在html的页面写的是用<marque>标签来写的，例如你说的新闻由上至下的滚动，其写法是：<div><marquee

direction=top

onmouseover="this.stop()"

onmouseout="this.start()"

behavior=scroll>至上而下</marquee>></div>

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了.H5里面好像没有什么替代marquee的吧。如果有请共享。互相学习。

下面是js实现代码：

body {

margin: 0px

font-size: 12px

color: #938C43

line-height: 150%

text-align:center

}

a:link{color: #9D943Afont-size:12px}

a:hover{color: #FF3300font-size:12px}

a:visited{color: #9D943Afont-size:12px}

a.red:link{color: #ff0000font-size:12px}

a.red:hover{color: #ff0000font-size:12px}

a.red:visited{color: #ff0000font-size:12px}

#marqueeBox{background:#f7f7f7border:1px solid silverpadding:1pxtext-align:centermargin:0 auto}

-->

</style>

</head>

<body>

var marqueeContent=new Array()

marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>"

marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>"

marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>"

marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>"

var marqueeInterval=new Array()

var marqueeId=0

var marqueeDelay=2000

var marqueeHeight=20

function initMarquee() {

var str=marqueeContent[0]

document.write('<div id="marqueeBox" style="overflow:hiddenwidth:250pxheight:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>')

marqueeId++

marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay)

}

function startMarquee() {

var str=marqueeContent[marqueeId]

marqueeId++

if(marqueeId>=marqueeContent.length) marqueeId=0

if(document.getElementById("marqueeBox").childNodes.length==1) {

var nextLine=document.createElement('DIV')

nextLine.innerHTML=str

document.getElementById("marqueeBox").appendChild(nextLine)

}

else {

document.getElementById("marqueeBox").childNodes[0].innerHTML=str

document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0])

document.getElementById("marqueeBox").scrollTop=0

}

clearInterval(marqueeInterval[1])

marqueeInterval[1]=setInterval("scrollMarquee()",20)

}

function scrollMarquee() {

document.getElementById("marqueeBox").scrollTop++

if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){

clearInterval(marqueeInterval[1])

}

initMarquee()

</script>

</body>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7312185.html

Html中实现滚动新闻无间隔限制的代码如何写，比如上下滚动是首尾相接。

发表评论

评论列表（0条）