新闻间隔滚动效果

最新推荐文章于 2022-02-25 20:00:37 发布

tangdonnaui

最新推荐文章于 2022-02-25 20:00:37 发布

阅读量84

点赞数

分类专栏： js 文章标签： JavaScript C C++ C# Firefox ViewUI

本文链接：https://blog.csdn.net/tangdonnaui/article/details/83496441

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

标记一下来。

<!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.οnlοad=function(){
    var o=document.getElementById('scroll');
    var t=setInterval(function(){scrollup(o,24,0);},2000);
    o.οnmοuseοver=function(){clearInterval(t)};
    o.οnmοuseοut=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>