滚动新闻列表完整代码
| 这是滚动新闻列表完整代码，具体代码如下： <!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> |
本网声明：海南科技网建站经验登载此文仅出于信息分享，并不意味着赞同其观点或证实其描述，不承担侵权行为的连带责任。文章内容仅供参考，不构成投资建议。投资者据此操作，风险自担。版权归原作者所有，如来源标注有误、不希望本网刊载或侵权，请与我们联系，本网核实后将立即撤除。来源为本网的，未经本网书面授权,任何单位或个人不得转载、摘编和发表。
责任编辑：NO296
下一篇：抱歉，没有了！
