To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

无缝滚动 javscript

demo:

var Mar=(function(Global){
    var Marquee=function(id){
        var content=document.getElementById(id),
            original=content.getElementsByTagName("li")[0],
            speed=arguments[1] || 10,
            clone=original.cloneNode(true);
            content.appendChild(clone);
        var scrolling=function(){
            if(content.scrollTop==clone.offsetTop){
                content.scrollTop=0;
            }else{
                content.scrollTop++;
            }
        }
        var timer=setInterval(scrolling,speed);
        content.onmouseover=function(){clearInterval(timer);}
        content.onmouseout=function(){timer=setInterval(scrolling,speed);}
    }
    return {
        init:function(){
            Global.addEventListener('load',function(){
                Marquee('content');
            },false)
        }
    }    
})(window)

html 布局：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <style type="text/css">
        #content{position:relative;width:300px;height:150px;overflow:hidden;}
        #content li{list-style:none;}
        #content li a{display:block;}
    </style>
    <ul id="content">
        <li>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
            <a href="javascript:void(0);">Javascript Fundations</a>
        </li>
    </ul>
</body>
</html>

 

posted on 2013-05-03 23:05  Ijavascript  阅读(198)  评论(0)  编辑  收藏  举报