求兼容FF的纵向无缝滚动新闻代码 [复制链接]

帖子: 499
体力: 830
威望: 0
居住地: 河北省沧州市

发表于 2010-7-26 18:28:23 |显示全部楼层

各位好：

我想要一个简单的纵向无缝滚动新闻效果，经过大量的搜索和试验，不是代码过于复杂，就是兼容性不好，真正作到“无缝”的也没有。哪位能提供一个简单实用的代码？

我的要求不多，让下面的列表纵向滚动，列表的最后一项和第一项之间不要有一点“缝”,要像一个完整的<ul>,兼容firefox,ie6,ie7,ie8:

<ul>
<li><a>新闻标题</a></li>
<li><a>新闻标题</a></li>
</ul>

非常感谢！

西部数码顶级域名注册商39元抢注！

使用道具举报

wangsdong　

银牌会员 

帖子: 719
体力: 2145
威望: 0

发表于 2010-7-26 19:16:31 |显示全部楼层

建议楼主以后发帖先看：本版规则
楼主说的这个论坛有很多。自己搜索下吧

asp教程资料

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

chanding　楼主

高级会员 

帖子: 499
体力: 830
威望: 0
居住地: 河北省沧州市

发表于 2010-7-28 17:12:27 |显示全部楼层

建议回贴时先看清原贴。

哪位朋友能实现这个效果？要求如下：

让下面的列表纵向滚动，列表的最后一项和第一项之间不要有一点“缝”,要像一个完整的<ul>,兼容 firefox,ie6,ie7,ie8，整个列表高度为一个固定的值(方便包含在一个固定高度的DIV中):

<ul>
<li><a>新闻标题</a></li>
<li><a>新闻标题</a></li>
</ul>

非常感谢！

使用道具举报

kin1987　

盛装

高级会员 

帖子: 321
体力: 830
威望: 0
居住地: 安徽省合肥市

发表于 2010-7-28 17:33:14 |显示全部楼层

效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li{font-size:12px;margin:0;padding:0}
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo1,#demo2{width:160px;}
ul li{
	list-style:none;
	}
a{ text-decoration:none; line-height:22px;color:#000000}
a:hover{color:#cc0000}
</style>
<script type="text/javascript">
window.onload = function(){
	var speed=50; //数字越大速度越慢
	var tab=document.getElementById("demo");
	var tab1=document.getElementById("demo1");
	var tab2=document.getElementById("demo2");
	tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
	function Marquee(){
	if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
	tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
	else{
	tab.scrollTop++
	}
	}
	var MyMar=setInterval(Marquee,speed);
	tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
	tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
}
</script>
</head>

<body>
<div id="demo">
<div id="demo1">
<ul>
    <li><a href="http://bbs.blueidea.com" target="_blank">新闻标题新闻标题1</a></li>
    <li><a href="http://bbs.blueidea.com" target="_blank">新闻标题新闻标题2</a></li>
    <li><a href="http://bbs.blueidea.com" target="_blank">新闻标题新闻标题3</a></li>
    <li><a href="http://bbs.blueidea.com" target="_blank">新闻标题新闻标题4</a></li>
	<li><a href="http://bbs.blueidea.com" target="_blank">新闻标题新闻标题5</a></li>
    <li><a href="http://bbs.blueidea.com" target="_blank">新闻标题新闻标题6</a></li>
</ul>
</div>
<div id="demo2"></div>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

Mr.Kin

使用道具举报