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

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

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

direction=top

onmouseover="this.stop()"

onmouseout="this.start()"

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

实现思路,先从集合中取出新闻条数,然后写foreach循环把下表当做序号依次输出即可。

实现的参考代码如下:

<form name="f1" method="post" action="">

<c:forEach items="${list}" varStatus="state" var="dto">

<input type="text" id="ntcode" name="ntcode" value="<c:out value="${dto.ntcode}">序号:</c:out>"/>

<label class="control-label" for="exampleInputPassword1">标题:</label>

<c:out value="${dto.nttitle}"></c:out>

<label class="control-label" for="exampleInputPassword1">正文:</label>

<c:out value="${dto.nttext}"></c:out>

<label class="control-label" for="exampleInputPassword1">发布人:</label>

<c:out value="${dto.agentcode}"></c:out>

<label class="control-label" for="exampleInputPassword1">发布时间:</label>

<c:out value="${dto.ntdate}"></c:out>

<input type="button" class="btn btn-block btn-red" id="del" name="del" value="删除此公告通知"

onclick="deletegg()"/>

</c:forEach>

</form>

<html>

<body>

<div ><table height="33" width="390px">

<tr>

<td height="33" style="align: leftbackground

-color: #ff0000padding-left: 16px">

<span style="font-size: 16px"><span

style="color: rgb(255,255,255)">新闻</span></span></td></tr>

</table></div>

<div id=butong_net_bottom style=overflow:hiddenheight:100width:390>

<div id=butong_net_bottom1>

<li style="list-style-position:outsidepadding-left:20px">当你孤单会想

谁</li>

<li style="list-style-position:outsidepadding-left:20px">你的心情总飞在</li>

<li style="list-style-position:outsidepadding-left:20px">什么事都去追</li>

<li style="list-style-position:outsidepadding-left:20px">烟火</li>

<li style="list-style-position:outsidepadding-left:20px">是否记得一起看烟火你在我眼里三说

</li>

<li style="list-style-position:outsidepadding-left:20px">当年孤单会

</li>

<li style="list-style-position:outsidepadding-left:20px">大家好我是百度

</li>

<li style="list-style-position:outsidepadding-left:20px">大家好我是新浪

</li>

</div>

<div id=butong_net_bottom2></div>

</div>

<script>

var speed=30

butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML

butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight

function Marquee2(){

if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)

butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight

else{

butong_net_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

butong_net_bottom.onmouseover=function() {clearInterval(MyMar2)}

butong_net_bottom.onmouseout=function() {MyMar2=setInterval

(Marquee2,speed)}

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存