タグ別アーカイブ: width

ページ内でのScroll位置表示

今回もページ内での演出効果です。
ページ内で scroll した際の現在位置を表示したいと思います。

<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 winTop;
                var winHeight;
                var winWidth;
                var nowLeft;
                $(window).scroll(function () {
                    winTop    = $(this).scrollTop();
                    winHeight = $(window).height();
                    winWidth  = $(window).width();
                    nowLeft   = ((winWidth * (winTop / (winHeight - window.innerHeight))) - 80);
                    $('#pointer').stop().animate({left: + nowLeft + 'px'}, 'normal');
                });

            });

        --></script>

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

            div#main_area .message {
                margin              : 300px;
            }

            div#point_area {
                position            : fixed;
                bottom              : 0px;
                height              : 80px;
                width               : 100%;
            }

            div#pointer {
                position            : absolute;
                top                 : 0px;
                left                : -80px;
                background-image    : url('icon_jpeg15.jpg');
                width               : 80px;
                height              : 80px;
                background-repeat   : no-repeat;
                background-position : center;
            }


        --></style>

    </head>
    <body>

        <div id="main_area">
            <div class="message">Pleas Scroll Down 01</div>
            <div class="message">Pleas Scroll Down 02</div>
            <div class="message">Pleas Scroll Down 03</div>
            <div class="message">Pleas Scroll Down 04</div>
            <div class="message">Pleas Scroll Down 05</div>
            <div class="message">Pleas Scroll Down 06</div>
            <div class="message">Pleas Scroll Down 07</div>
            <div class="message">Pleas Scroll Down 08</div>
            <div class="message">Pleas Scroll Down 09</div>
            <div class="message">Pleas Scroll Down 10</div>
        </div>
        <div id="point_area">
            <div id="pointer"></div>
        </div>

    </body>
</html>

sample

sample で 上下に scroll すると画面の下部に現在位置を視覚的に表示してみました。

ページの残り長さがどの程度あるのかが視覚的にわかるのは良いものですね。
章仕立てでページが構成されている場合、章ごとに画像を変えるなどしても面白いと思います。
実際にはメニュー表示のほうが望ましいのかもしれませんが、遊び心はメニューよりも良い気がします。

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

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

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

ウィンドウのサイズに合わせて画像のサイズを変更(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 人がこの 投稿 は役に立ったと言っています。

ウィンドウのサイズに合わせて画像のサイズを変更(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 objAreaDiv    = $('#disp_area');
                var objImgDiv     = $('#image_area');
                var objImage      = $('#image_area img');

                var mAreaSizeW    = 0;
                var mAreaSizeH    = 0;

                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;

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

                    objImgDiv.width(mBaseSizeW).height(mBaseSizeH);
                    objImage.width(mDispSizeW).height(mDispSizeH).css({'top' : mDispPointT, 'left' : mDispPointL});

                }

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

            });

        --></script>

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

            #disp_area {
                position   : relative;
                margin     : 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 に合わせて画像の拡大率が変わります。
但し、画像の表示領域は変わりません。

今回の案件は「画像の領域は変えずに画像の Size を変えてもらえないか。」とのお問い掛けからでした。
それなら前回の内容を変えてみればなんとかできるかな、と云う思いつきです。
思ったより上手く行ったようで良かったです。

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

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

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

今回はウィンドウの Size に合わせて画像の Size を変更してみます。
CSS でも良いのかと思いますが別の用途で Size の変更もある場合、
こんな処理も必要かと思います。他の方に参考になればと思います。

<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    = 0;

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

                var mDispSizeW    = 0;
                var mDispSizeH    = 0;

                // ReSize
                function fnMovieReSizeSet() {

                    mAreaSizeW = objImgDiv.width();

                    if (mAreaSizeW > mBaseSizeW) {
                        mAspectRatio = (mAreaSizeW / mBaseSizeW)
                        mDispSizeW = mAreaSizeW;
                        mDispSizeH = mBaseSizeH * mAspectRatio;
                    } else {
                        mDispSizeW = mBaseSizeW;
                        mDispSizeH = mBaseSizeH;
                    }

                    objImage.width(mDispSizeW).height(mDispSizeH);

                }

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

            });

        --></script>

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

            #disp_area {
                position   : relative;
            }

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

        --></style>

    </head>
    <body>

        <div id="disp_area">

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

        </div>

    </body>
</html>

sample

sample を表示すると画像を画面幅いっぱいに表示します。
今回は画像の元サイズより小さいサイズにはしないようにしています。

画像を表示する場合はCSSで画像を背景として表示する方法もありますが、
今回はあえて Javascript での変更にて制御しています。

以外と面倒ですね・・・
正直CSSだけで制御する方が良いのかなぁ・・・

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

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