滚动新闻列表完整代码
| 这是滚动新闻列表完整代码，具体代码如下： <!doctype html> <html> <head> <meta http-equiv='content-language' content='en-gb'> <meta charset="utf-8"> <title>滚动新闻代码</title> <base target="_blank" /> </head> <body> <style type="text/css"> .list{ width:430px; height:28px; line-height:28px; margin:0px 0 0 0;list-style-type:none;padding-left:10px; background:#f0f0f0;} .list li{text-decoration:none;font-size:14px; width:430px; height:28px; font-family: "宋体";overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .list a{text-decoration:none; color:#000000;} .list li a:hover{color:#d70000; } .list a:link{color:#000000;} </style> <div class="list" id="hainan"> <?php $cfbt="|"; ?> [e:loop={'794,813,',28,0,0,'firsttitle=0','newstime DESC'}] <?php if(stristr($cfbt,"|".$bqr['title']."|")) { continue; } $cfbt.=$bqr['title']."|"; ?> <li><a href="<?=$bqsr['titleurl']?>" title="<?=esub($bqr[title],180)?>"><?=$bqr[ftitle]?$bqr[ftitle]:esub($bqr[title],180)?></a></li> [/e:loop] </div> <script language="javascript"> const marqueesHeight = 28; let stopscroll = false; const hainan = document.getElementById('hainan'); hainan.style.height = marqueesHeight + 'px'; hainan.style.overflowY = 'hidden'; hainan.noWrap = true; hainan.onmouseover = function() { stopscroll = true; }; hainan.onmouseout = function() { stopscroll = false; }; // 双倍内容以实现循环滚动 hainan.innerHTML += hainan.innerHTML; function init_srolltext() { hainan.scrollTop = 0; setInterval(scrollUp, 3000); // 滚动速度 } function scrollUp() { if (stopscroll) return; let currentTop = hainan.scrollTop; let nextTop = currentTop + 1; // 如果滚动到顶部或已经到达下一个标题，则滚动整个标题高度 if (currentTop % marqueesHeight === 0 || nextTop % marqueesHeight === 0) { nextTop = currentTop + marqueesHeight; } hainan.scrollTop = nextTop; // 如果滚动到了内容的末尾，则重置滚动位置 if (nextTop >= hainan.scrollHeight - marqueesHeight) { hainan.scrollTop = 0; } } init_srolltext(); </script> </body> </html> |
本网声明：海南科技网发布此文仅出于信息分享，并非赞同其观点或证实其描述，不承担侵权行为的连带责任。投资者据此操作，风险自担。版权归原作者所有，如涉版权或来源标注有误，请联系我们删除。本网原创内容未经书面授权，任何单位或个人不得转载和摘编。
猜您喜欢
-
滚动新闻列表完整代码
这是滚动新闻列表完整代码，具体代码如下： <!doctype html> <html> <head> <meta http-equiv='查看全文>>- 建站经验
海南科技网
-
让文本框输入的文字距离左边框4px
input{text-indent:4px;}//首行缩进，但为了兼容性更好，建议使用text-indent:20px;替换成padding-left:2查看全文>>- 建站经验
海南科技网
-
如何在Navicat软件添加新字段到数据表的详细步骤及教程
在Navicat中添加字新段到数据库表的详细步骤及教程如下：‌ 注意：为了安全起见，在添加新字段查看全文>>- 建站经验
海南科技网
-
-
