ページの無限ループ (2)

前回はページの無限ループを行いました。
今回は同じような内容に挑戦してみようかと思います。
内容は横の自動無限ループです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                var loopWidth = $('#main_area').children('span').width();
                    $('#main_area span').clone().appendTo('#main_area');

                function execSideLoop() {
                    $('#main_area').css({left:'0'});
                    $('#main_area').stop().animate({left:'-' + loopWidth + 'px'}, 25000, 'linear', execSideLoop);
                };

                execSideLoop();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #main_area {
                white-space : nowrap;
                position : absolute;
                top : 0px;
            }

            #main_area span {
                float : float;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <span>
                    text00 text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12 text13 text14 text15 text16 text17 text18 text19 text20 text21 text22 text23 text24 text25 text26 text27 text28 text29 text30 text31 text32 text33 text34 text35 text36 text37 text38 text39 text40 text41 text42 text43 text44 text45 text46 text47 text48 text49 text50
                </span>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを左に自動スクロールをしています。

この機能自体は優秀な plugin が多くありますので、実際の Webサイトを作成することは無いと思います。
まあ、そんな実際には作成することのない機能について、どうやれば再現できるかの勉強ですね。
実際に触ってみると色々と勉強になるものですね。

出来た内容は往年の MARQUEE ですね(笑)
実際には文字だけでは使い道は無いですが、画像などを使用しないと華がないなぁ。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です