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>
  • 相关阅读:
    [TJOI2018]教科书般的亵渎
    luogu P4781 【模板】拉格朗日插值
    [SDOI2010]捉迷藏
    [CQOI2016]K远点对
    BZOJ4066 简单题
    [国家集训队]JZPFAR
    Understanding User and Kernel Mode
    Linux下如何查看系统启动时间和运行时间以及安装时间
    CentOS Linux搭建独立SVN Server全套流程(修改svn仓库地址、服务启动等)
    linux下获取占用CPU资源最多的10个进程,可以使用如下命令组合:
  • 原文地址:https://www.cnblogs.com/wangwenfei/p/javascriptScroll.html
Copyright © 2011-2022 走看看