滚动新闻列表完整代码

2024-10-26 20:35:22　来源：海南科技网　繁体　复制　

这是滚动新闻列表完整代码，具体代码如下：
<!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=&#39查看全文>>

建站经验

海南科技网2024-10-26 20:35:22
让文本框输入的文字距离左边框4px

input{text-indent:4px;}//首行缩进，但为了兼容性更好，建议使用text-indent:20px;替换成padding-left:2查看全文>>

建站经验

海南科技网2024-10-23 11:16:54
返回上一级代码

<input type="button" value="返回" onClick="history.go(-1);" style="margin: 0px 15px;background查看全文>>

建站经验

海南科技网2024-10-23 11:16:29
如何在Navicat软件添加新字段到数据表的详细步骤及教程

　　在Navicat中添加字新段到数据库表的详细步骤及教程如下：&zwnj;　　注意：为了安全起见，在添加新字段查看全文>>

建站经验

海南科技网2024-07-23 13:10:43
帝国CMS后台管理栏目分页如何修改每页显示条数？

　　大家好，好久没分享教程了，今天我们谈谈帝国CMS后台管理栏目分页如何修改每页显示条数?这个功能可能查看全文>>

建站经验

海南科技网2024-06-26 17:37:01