C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试 笔记 ppt 设计模式 问题 远程连接

js无缝滚动,不平滑(求高人指点)

<!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" />
<title>无缝滚动</title>
<style>
*{ margin:0; padding:0;}


.container{ width:450px; height:150px; border:2px solid orange; overflow:hidden; margin:200px auto;}
.container ul li{ width:400px; line-height:35px; margin-left:15px; border-bottom:1px dashed gray; list-style:none;}
</style>
</head>
<body>
<div class="container" id="container">
    <div id="scroll1">
        <ul>
            <li>1.韩国客机坠毁旧金山 乘客讲述被甩出客舱一瞬</li>
            <li>2.中领馆证实韩亚客机事故2名遇难者为中国公民</li>
            <li>3.中关村空间信息技术产业联盟</li>
            <li>4.韩国亚洲航空航班失事 伤亡情况暂时不详</li>
            <li>5.百度知道自动问答采纳软件 </li>  
            <li>6.孩子学习不好怎么办</li>                                              
        </ul>
    </div>
    <div id="scroll2">
    </div>
</div>

</body>
<script>
function Fid(id)
{
    return "string" == typeof id ? document.getElementById(id) : id;;    
}

function Marquee()
{
    Fid('scroll2').innerHTML = Fid('scroll1').innerHTML;
    
    var timer = 0;
    function _scroll()
    {
        timer = setInterval(function(){
    
            if(Fid('container').scrollTop == Fid('scroll1').offsetHeight){
                Fid('container').scrollTop = 0;
            }
            
            Fid('container').scrollTop ++;
    
        },20)
    }
    
    _scroll();
    
    //移动到上面停止滚动
    Fid('container').onmouseover = function(){
        clearInterval(timer);    
        
    }
    
    //移除继续滚动
    Fid('container').onmouseout = function(){
        _scroll();
    }
}

Marquee();

</script>
</html>


效果图:

  

 

posted on 2013-07-08 00:31  思齐_  阅读(798)  评论(0编辑  收藏  举报