新闻间隔滚动效果

tangalexis

浏览: 131966 次
性别:
来自: 广州

最近访客更多访客>>

kokorodo

djsmallpig

mengji61

koringz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript C C++C#Firefox

标记一下来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>间隔新闻滚动</title>
<style type="text/css">

* { margin:0; padding:0; font:normal normal 12px/1.5em "Arial"; }
ul li { list-style:none;}
#scroll { width:300px; overflow:hidden; height:20px; margin:50px auto; border:1px solid red; text-align:center;}
</style>

</head>

<body>
<ul id="scroll">
<li ><a href="#">新闻一</a></li>
<li ><a href="#">新闻二</a></li>
<li ><a href="#">新闻三</a></li>
<li ><a href="#">新闻四</a></li>
</ul>
<script language="javascript" type="text/javascript">
window.onload=function(){
    var o=document.getElementById('scroll');
    var t=setInterval(function(){scrollup(o,24,0);},2000);
    o.onmouseover=function(){clearInterval(t)};
    o.onmouseout=function(){t=setInterval(function(){scrollup(o,24,0);},2000)}
}
///滚动主方法
///参数:o 滚动块对象
///参数:d 每次滚屏高度
///参数:c 当前已滚动高度
function scrollup(o,d,c){
    if(d==c){
        var t=getFirstChild(o.firstChild).cloneNode(true);
        o.removeChild(getFirstChild(o.firstChild));
        o.appendChild(t);
        t.style.marginTop="0px";
    }else{
        c+=2;
        getFirstChild(o.firstChild).style.marginTop=-c+"px";
        window.setTimeout(function(){scrollup(o,d,c)},20);
    }
}
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
while (node.nodeType!=1)
{
         node=node.nextSibling;
}
return node;
}
</script>
</body>

</html>

分享到：

用Jquery 模仿一个tudou的头部广告图片轮 ... | 有关图片列表会有3像素的间隔的问题

2009-12-01 10:45
浏览 899
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论