精典的上下滚动,js,IE和FF都兼容

2009-02-03 13:48:38 by 【6yang】, 61 visits, 收藏 | 返回

<!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">
a{ color:#000;}
#block2{height:24px;width:500px;border:#ccc 1px solid;text-align:left; font-size:12px;}
#block2 ul{list-style:outside none none;overflow:hidden;margin:0;height:24px;}
#block2 ul li{margin:0px 0;height:24px;width:490px; padding:0px; line-height:24px;}
#block2 ul li a{text-decoration:none;}
</style>
</head>
<body>
<div id="block2">
<ul id="rolltxt">
    <li><a href="http://www.6yang.net">上海设计之谭</a>1</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>2</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>3</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>4</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>5</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>6</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>7</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>8</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>9</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>10</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>11</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>12</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>13</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>14</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>15</li>
    <li><a href="http://www.6yang.net">上海设计之谭</a>16</li>
</ul> </div>
<script type="text/javascript">
function extractNodes(pNode){
    if(pNode.nodeType == 3)return null;
    var node,nodes = new Array();
    for(var i=0;node= pNode.childNodes[i];i++){
        if(node.nodeType == 1)nodes.push(node);
    }
    return nodes;
}
var obj=document.getElementById("rolltxt");
for(i=0;i<4;i++){
    obj.appendChild(extractNodes(obj)[i].cloneNode(true));
}
settime=0;
var t=setInterval(rolltxt,20);
function rolltxt(){
    if(obj.scrollTop % (obj.clientHeight-0) ==0){
        settime+=1;
        if(settime==80){
            obj.scrollTop+=1;
            settime=0;
        }
    }else{
        obj.scrollTop+=1;
        if(obj.scrollTop==(obj.scrollHeight-obj.clientHeight)){
            obj.scrollTop=0;
        }
    }
}
obj.onmouseover=function(){clearInterval(t)}
obj.onmouseout=function(){t=setInterval(rolltxt,20)}
</script>

</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=522&cid=3

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 学习技术库

精典的上下滚动,js,IE和FF都兼容

图片原图