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

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

簡易カラーピッカー(HTML5版)

以前に簡易的なカラーピッカーを作ってみました。
今回は必要のためちょっと変更してみます。
具体的に言うと画像ファイルから行うカラーピッカーです。

<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 objCanvas = document.getElementById('canvas_area');
                var datContex = objCanvas.getContext('2d');
                var imgData = new Image();
                    imgData.src = './image_jpeg03.jpg';
                    imgData.onload = function() {
                        datContex.drawImage(imgData, 0, 0, imgData.width, imgData.height);
                    };

                var cnvOffset   = $(objCanvas).offset();
                var cnvX        = 0;
                var cnvY        = 0;
                var selectColor = {};
                var pixelColor  = [];
                var setRGBa     = '';

                $('#canvas_area').on('click', function(eObj) {

                    cnvX = Math.floor(eObj.pageX - cnvOffset.left);
                    cnvY = Math.floor(eObj.pageY - cnvOffset.top);

                    selectColor = datContex.getImageData(cnvX, cnvY, 1, 1);    // 1pxData
                    pixelColor  = selectColor.data;
                    setRGBa     = 'rgba(' + pixelColor[0] + ',' + pixelColor[1] + ',' + pixelColor[2] + ',' + pixelColor[3] + ')';
                    $('#color_disp').css('backgroundColor', setRGBa);

                });

            });

        --></script>

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

            #canvas_area {
                cursor           : crosshair;
            }

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #color_disp {
                height           : 150px;
                width            : 150px;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
           <div id="color_disp"></div>
        </div>
        <canvas id="canvas_area" width="740" height="350"></canvas>

    </body>
</html>

sample

sampleで表示されている画像をクリックすると、クリックした箇所の色が上部の色表示エリアに表示します。

今回は微妙に困りました。
canvas で使用している getImageData ですが、いつもの開発環境(chrome)で作成していると、
ローカルでは Error が発生するんですね・・・。原因がわからなかったんで暫く悩んでしましました。
結局 Server に Uplode してからチェックするといった面倒な作業で対応しましたが、
もうちょっと融通が利いてもいいと思うんですが・・・

今回のさらなる課題としては、色彩が豊かな画像の場合、Click したときにどの Pixel を選択したかが
わかりにくい点ですね。
click ではなく mousover の方が良いんでしょうか・・・
マウスの形状を即したものするか、margin, padding でそろえるか少し考えどころですね。

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

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 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 menuBox = $('#menu_box');
                var topPoint;
                $(window).scroll(function () {

                    var winTop = $(this).scrollTop();
                    if (winTop < 50) {
                        menuBox.slideDown();
                        menuBox.addClass('menu_fixed');
                    } else {
                        if (topPoint > winTop) {
                            menuBox.slideDown();
                            menuBox.addClass('menu_fixed');
                        } else {
                            menuBox.slideUp();
                            menuBox.removeClass('menu_fixed');
                        }
                    }
                    topPoint = winTop;

                });


            });

        --></script>

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

            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                
            }
            
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
            
            .disp_box {
                width            : 100%;
                height           : 1500px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }

        --></style>

    </head>
    <body>

        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>

        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>

    </body>
</html>

sample

smaple ページを開いた時点では特に何もありません。
画面下に向けてスクロールするとメニューも表示が消えていきます。

ここまでだと、jQuery を使用していない場合と同じです。
但し、スクロールを少しでも上に戻すと常にメニューが表示されるようになります。
上部に向けたスクロール中は常に上部に固定されます。

・・・結構いいですね。
サイトが綺麗になるほどメニューを画面上に表示するかを悩むかと思います。
普段は表示されなくても、メニューを表示したい場合はすぐに使える。
中々便利だと思います。

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

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

3D 的にページを傾ける

今回はページ移動するときの動作として 3D 的に移動させて行く為の動作練習です。

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

                // initialization
                $('#disp_area').css('fontsize', 0);

                $('#disp_area').animate(
                    {
                        fontsize : 1
                    },
                    {

                        // animate time ( second 1.5 )
                        duration:1500,

                        step:function(step){
                            // step animate
                            $(this).css({transform:'rotate3D(25, 50, 10, ' + (step * 45) + 'deg)'});
                        }

                    }
                );

            }

        --></script>

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

            #disp_area {
                margin           : 50px;
                padding          : 50px;
                width            : 800px;
                background-color : #cccccc;

                -webkit-transform-origin : 100% 100%;
                -moz-transform-origin    : 100% 100%;
                -ms-transform-origin     : 100% 100%;
                -o-transform-origin      : 100% 100%;
                transform-origin         : 100% 100%;

            }

            h2 {
                margin-top       : 30px;
            }

            p {
                margin-left      : 30px;
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <button onclick="exePageShowMove();">Move</button>
        </div>

        <div id="disp_area">

            <h1>Sample Page</h1>

            <h2>Sample Text1</h2>
            <p>
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
            </p>

            <h2>Sample Image</h2>
            <div>
                <img src="./icon_jpeg01.jpg">
                <img src="./icon_jpeg02.jpg">
                <img src="./icon_jpeg03.jpg">
            </div>

            <h2>Sample Text2</h2>
            <p>
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text<br />
            </p>

        </div>

    </body>
</html>

sample

spmple には button があります。
button を押すとページ内容が奥に傾きます。

なかなか難しいですね・・・
数値を考えないと中々自然にには動きません。
動作的には単純な動作ですが、幾つかの動作をつなげないと自然な動作は難しいかもしれません。

でも、実際にはページ毎に動作させるため、今回の動作内容が把握できた時点でちょっと満足です。
後はこの動作を複数組み合させて行かないといけませんが、目途は立ったと思います。

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

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