JS オンリーなニュースティッカー　メモ

JS

http://okwave.jp/qa4798363.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
        <script>
            window.onload=function(){
                var $=function(id){
                    return document.getElementById(id)
                }
                var container=$('container')
                var target=$('sample')
                var startLeft = container.clientWidth;
                var endLeft = -target.offsetWidth;
                target.style.left=(startLeft-100)+'px';
                target.style.width=-endLeft+'px';
                target.style.position='absolute';
                setInterval(function(){
                    var left = parseInt(target.style.left)
                    target.style.left=((left<endLeft?startLeft:left-1)+'px');
                },10);
            }
        </script>
        <style>
            html,body{
                margin:0;
            }
            #container{
                width:100%;
                height:1em;
                overflow:hidden;
                background:#555;
                position:relative;
            }
            #sample{
                color:#fff;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <span id="sample">あいうえおかいくけこ</span>
        </div>
    </body>
</html>