月別アーカイブ: 2014年9月

ページの無限ループ (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 人がこの 投稿 は役に立ったと言っています。

ページの無限ループ

今回はページの無限ループに挑戦してみようかと思います。
横の無限ループは良くプラグインで使用される機能ですよね。
試しに一度やってみようと思います。

<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(){

                $("body").height($(window).height() + 50);
                var heightB  = $("body").height();
                
                var heightW  = 0;
                var heightST = 0;
                var baseTop  = 1;
                
                $(window).scroll(function() {

                    heightW  = window.innerHeight;
                    heightST = $(window).scrollTop();

                    if ( heightST >= (heightB - heightW) ) {
                        $(window).scrollTop(baseTop);
                    } else if (heightST == 0) {
                        $(window).scrollTop(heightB - heightW - baseTop);
                    }

                });

            });


        --></script>

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

            #main_area div {
                margin : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <div>text01 text01 text01 text01 text01</div>
                <div>text02 text02 text02 text02 text02</div>
                <div>text03 text03 text03 text03 text03</div>
                <div>text04 text04 text04 text04 text04</div>
                <div>text05 text05 text05 text05 text05</div>
                <div>text06 text06 text06 text06 text06</div>
                <div>text07 text07 text07 text07 text07</div>
                <div>text08 text08 text08 text08 text08</div>
                <div>text09 text09 text09 text09 text09</div>
                <div>text10 text10 text10 text10 text10</div>
                <div>text11 text11 text11 text11 text11</div>
                <div>text12 text12 text12 text12 text12</div>
                <div>text13 text13 text13 text13 text13</div>
                <div>text14 text14 text14 text14 text14</div>
                <div>text15 text15 text15 text15 text15</div>
                <div>text16 text16 text16 text16 text16</div>
                <div>text17 text17 text17 text17 text17</div>
                <div>text18 text18 text18 text18 text18</div>
                <div>text19 text19 text19 text19 text19</div>
                <div>text20 text20 text20 text20 text20</div>
                <div>text21 text21 text21 text21 text21</div>
                <div>text22 text22 text22 text22 text22</div>
                <div>text23 text23 text23 text23 text23</div>
                <div>text24 text24 text24 text24 text24</div>
                <div>text25 text25 text25 text25 text25</div>
                <div>text26 text26 text26 text26 text26</div>
                <div>text27 text27 text27 text27 text27</div>
                <div>text28 text28 text28 text28 text28</div>
                <div>text29 text29 text29 text29 text29</div>
                <div>text30 text30 text30 text30 text30</div>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを上下にスクロールすると無限ループします。

よくある処理のため、ありがちではありますが結構面白いですね。
あまりにもページが短い場合などは別途対応する必要もありそうですが、
そのあたりは臨機応変に対応する必要がありそうです。

表示する内容に最寄りますが綺麗な写真などを繰り返し表示する場合など、
使い方によっては効果的に表示することができそうです。
まぁ、今回の sample の様なページでは魅力も半減ですが(笑)

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

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

pjaxもどき

最近はいろんなところで良く「pjax」を使用したサイトを見るようになりました。
ただ「pjax」はプラグインであり、実際には 「ajax」と「pushState(HTML5)」を組み合わせたものの様です。
今回はpjaxもどきを試してみたいと思います。

<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"><!--

            var state = '';

            function funcDispChange(pageData) {

                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_958_' + pageData + '.txt'
                }).done(function(data) {
                    // ajax ok
                    history.pushState(state, '', 'sample_958_' + pageData + '.txt');
                    $("#main_area p").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#main_area p").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

            $(window).on('popstate', function(e) {
                state = e.originalEvent.state;
            });


        --></script>

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

            div {
                margin : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">
            <h1>Page Title</h1>

            <div id="header_area">
                <p>Head Area</p>
                <p>
                    <a href="javascript:void(0);" onclick="funcDispChange(1);">Click Link 1</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(2);">Click Link 2</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(3);">Click Link 3</a><br />
                </p>
            </div>

            <div id="main_area">
                <p>Main Area</p>
            </div>

            <div id="footer_area">
                <p>Foot Area</p>
            </div>

        </div>

    </body>
</html>

sample

sample では link を click するとページが変わります。
その際に URL は変更されており、ページもスムーズに入れ替わります。

実際のサイトを作成する時には pjax のプラグインを使用する形だと思います。
すでに複数の Plugin も作成されていますからね・・・

それでも今回の内容を自分でやってみるのは結構面白かったですね。
こういった内容をやるとWebサイトの進歩を感じます。
本当に HTML5 など凄いものですね。

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

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

ウィンドウのサイズに合わせて画像のサイズを変更(3)

前々回,前回に引き続いてウィンドウサイズに合わせた画像サイズの変更です。
表示方法には色々な意見がありますね、高さのサイズは変更したくない(ページ全体のレイアウトは崩さない)場合に挑戦です。
高さは固定で画像の拡大・縮小と内部的な調整をやって見ます。
まぁ、前々回と前回の「まとめ」みたいなものですね。

<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 objAreaDiv    = $('#disp_area');
                var objImgDiv     = $('#image_area');
                var objImage      = $('#image_area img');

                var mAreaSizeW    = 0;
                var mAreaSizeH    = 80;

                var mBaseSizeW    = 220;    // Image Width
                var mBaseSizeH    = 80;     // Image Height

                var mDispSizeW    = 0;
                var mDispSizeH    = 0;
                var mDispPointT   = 0;
                var mDispPointL   = 0;

                // ReSize
                function fnMovieReSizeSet() {

                    mDispPointL = 0;
                    mDispPointT = 0;
                    mAreaSizeW = objAreaDiv.width();

                    mAspectRatio = (mAreaSizeW / mBaseSizeW);
                    mDispSizeW = mAreaSizeW;
                    mDispSizeH = mBaseSizeH * mAspectRatio;

                    mDispPointT = (((mDispSizeH - mBaseSizeH) / 2) * -1);

                    if (mAreaSizeH < mDispSizeH) {
                        objImgDiv.width(mAreaSizeW).height(mAreaSizeH);
                        objImage.width(mDispSizeW).height(mDispSizeH).css({'top' : mDispPointT});
                    }

                }

                $(window).resize(function() {
                    fnMovieReSizeSet();
                });
                fnMovieReSizeSet();

            });

        --></script>

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

            #disp_area {
                position   : relative;
                margin-top : 50px;
            }

            #image_area {
                left       : 0;
                right      : 0;
                top        : 0;
                position   : absolute;
                overflow   : hidden;
            }

            #image_area img {
                position   : absolute;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="image_area">
                <img src="./icon_jpeg01.jpg">
            </div>

        </div>

    </body>
</html>

sample

sampleではウィンドウの Size に合わせて画像の拡大率が変わります。
但し、画像(縦)の表示領域は変わりません。
また、画像の表示は高さに合わせて中心を表示しています。

高さを限定することでページのレイアウトが変わらずに全画面の表示が可能です。
・・・結構実用性があるのではないでしょうか、思ったよりも出来が良いです。
それに画像よりは動画向きかも知れませんね。
まぁ、色々なところで使ってみようかと思います。

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

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