向上滚动还是向左滚动可用css控制整体容器来实现。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
#scroll_up
{
height:100px;
width:200px;
border:1px;
border-style:dashed;
overflow:hidden;
}
</style>
<script type="text/javascript" >
var html="";
var num=0;
var states=0;
var ucontent;
var textA=new Array();//数组列表存储滚动内容
//初始化
function Init(uid)
{
ucontent= document.getElementById(uid);
num= ucontent.childNodes.length;
var id=1;
for(;id<=num;id++)
{
textA[id-1]=ucontent.childNodes.item(id-1).innerText;
}
}
function run()
{
if(states==0)
{
//替换内容
var temp=textA[0];//替换第一元素
var id=1;
for(;id<num;id++)
{
textA[id-1]=textA[id];
ucontent.childNodes.item(id-1).innerText=textA[id-1];
}
textA[num-1]=temp;
ucontent.childNodes.item(num-1).innerText=textA[num-1];
}
}
window.οnlοad=function ()
{
Init("ul_id");
setInterval("run()",500);
}
function end()
{
states=1;
}
function begin()
{
states=0;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%-- 上下滚动-无间隙--%>
<%--实现方案:利用js对数组进行重排,提取顶部数据放置到末尾--%>
<div id="scroll_up" οnmοuseοver="end()" οnmοuseοut="begin()">
<ul id="ul_id">
<li >我是1</li>
<li >我是12</li>
<li >我是13</li>
<li >我是14</li>
<li >我是15</li>
<li >我是16</li>
<li >我是17</li>
<li >我是18</li>
<li >我是19</li>
<li >我是20</li>
<li >我是10</li>
</ul>
</div>
</div>
</form>
</body>
</html>