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
Copyright © 2011-2022 走看看