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>

查看全文

相关阅读:
☀【CSS3】形状
 ♫【MV*】
☀【布局】多栏布局 / 盒布局
 2017 无奈的模拟赛 1
洛谷——P2093 零件分组
 洛谷——P1209 [USACO1.3]修理牛棚 Barn Repair
洛谷——P2695 骑士的工作
 洛谷——P1330 封锁阳光大学
 python（16）- python内置函数
 MTK平台缩写

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