zoukankan html css js c++ java

无缝滚动 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>

查看全文

相关阅读:
【JavaScript DOM 编程艺术】笔记
 如何循序渐进有效学习 JavaScript？
如何正确学习JavaScript
HTML5学习
 window上杀死node进程
 HTML5：离线存储
 js面向对象的理解
 H5项目常见问题及注意事项
 查找已连接过的wifi密码
 flex的兼容

原文地址：https://www.cnblogs.com/wangwenfei/p/javascriptScroll.html