月別アーカイブ: 2015年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 exeImageRotate(r_type, angle) {

                // initialization
                $('#cube_area').css('zindex', 0);

                $('#cube_area').animate(
                    {
                        zindex : 1
                    },
                    {

                        // animate time ( second 3 )
                        duration:3000,

                        step:function(step){
                            // step animate
                            if (r_type == '3d') {
                                // 3d
                                $(this).css({transform:'rotate' + r_type + '(1, 1, 1, ' + (step * angle) + 'deg)'});
                            } else {
                                // X, Y, Z
                                $(this).css({transform:'rotate' + r_type + '(' + (step * angle) + 'deg)'});
                            }
                        }

                    }
                );

            }

        --></script>

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

            div#main_area {
                margin           : 50px;
            }
            
            div#cube_area {
                height           : 180px;
                width            : 180px;
                transform-style  : preserve-3d;
                font-size        : 50px;
            }

            div#button_area {
                margin-top       : 100px;
            }

            div.panel {
                position         : absolute;
                height           : 180px;
                width            : 180px;
                text-align       : center;
                line-height      : 180px;
            }

            div#panel_1 {
                background-color : #ffcccc;
                transform        : rotateX(0deg) translateZ(90px);
            }

            div#panel_2 {
                background-color : #ccffcc;
                transform        : rotateX(-90deg) translateZ(90px);
            }

            div#panel_3 {
                background-color : #ccccff;
                transform        : rotateX(-180deg) translateZ(90px);
            }

            div#panel_4 {
                background-color : #ff0000;
                transform        : rotateX(-270deg) translateZ(90px);
            }

            div#panel_5 {
                background-color : #00ff00;
                transform        : rotateX(0deg) rotateY(90deg) translateZ(90px);
            }

            div#panel_6 {
                background-color : #0000ff;
                transform        : rotateX(0deg) rotateY(-90deg) translateZ(90px);
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="cube_area">
                <div class="panel" id="panel_1">1</div>
                <div class="panel" id="panel_2">2</div>
                <div class="panel" id="panel_3">3</div>
                <div class="panel" id="panel_4">4</div>
                <div class="panel" id="panel_5">5</div>
                <div class="panel" id="panel_6">6</div>
            </div>
            <div id="button_area">
                <button id="up"  onclick="exeImageRotate('X', 360);">up</button>
                <button id="down"  onclick="exeImageRotate('X', -360);">down</button>
                <button id="left"  onclick="exeImageRotate('Y', 360);">left</button>
                <button id="right"  onclick="exeImageRotate('Y', -360);">right</button>
                <button id="turn" onclick="exeImageRotate('3d', 360);">turn</button>
            </div>
        </div>

    </body>
</html>

sample

sample では各button を click すると立方体が回転します。

立方体を作って見ましたが回転の時にちょっと難がありますね。
今までは何気なく気がついてはいましたが、transform:rotate では回転位置を
保持できないですね。

次の目標は回転位置の保持ですかね・・・
・・・それにしても今回の内容は jQuery というより、
ほぼ css の内容ですね・・・、次は気をつけます。

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

                var speed = 400;
                function exeImageRotate(angle) {
                    $('#move_area').stop().css({'fontsize':0}).animate(
                        { fontsize : 1 },
                        { duration : speed,
                            step:function(step){
                                $(this).css({transform:'rotateX(' + (step * angle) + 'deg)'});
                            }
                        }
                    );

                }

                $('#button_area').hover(
                    function () {
                        $('#before').css({transform:'rotateX(0deg) translateZ(30px)'});
                        $('#after').css({transform:'rotateX(-90deg) translateZ(30px)'});
                        exeImageRotate(90);
                    },
                    function () {
                        $('#before').css({transform:'rotateX(90deg) translateZ(30px)'});
                        $('#after').css({transform:'rotateX(0deg) translateZ(30px)'});
                        exeImageRotate(-90);
                    }
                );



            });

        --></script>

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

            div#main_area {
                margin           : 50px;
            }

            div#button_area {
                position         : absolute;
                height           : 60px;
                width            : 180px;
                z-index          : 99999;
            }
            
            div#move_area {
                height           : 60px;
                width            : 180px;
                transform-style  : preserve-3d;
            }

            div.button {
                position         : absolute;
                height           : 60px;
                width            : 180px;
                text-align       : center;
                line-height      : 60px;
            }

            div#before {
                background-color : #ccffcc;
                transform        : rotateX(0deg) translateZ(30px);
            }

            div#after {
                background-color : #00ff00;
                transform        : rotateX(-90deg) translateZ(30px);
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="button_area"></div>
            <div id="move_area">
                <div class="button" id="before">before</div>
                <div class="button" id="after">after</div>
            </div>
        </div>

    </body>
</html>

sample

sample で button 部分に mousehover すると buttonが立体的に入れ替わります。

作業内容自体は div を回転させているだけなので画像なども使用可能です。
・・・やっていることは問題ないと思うのですが地味な気がしますね。
何だろう、もっと画像やサイズを調整すると綺麗に見えるんですかね・・・

まぁ、それはともかく処理としては楽しいですね。
機会があれば今度は立方体を作ってみようかなと思います。

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

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

数字の標記編集(3桁毎のカンマ区切り)

今回はお仕事ネタです。
お仕事の内容は「入力した数字を計算して出力」と云った内容です。
今回はその機能を作る際に出された以下の条件に関してです。
 1. 全角の数字が入っていても半角に変換して表示して欲しい。
 2. 表示する数値の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(){

                $('#button').click(function() {

                    var numVal;
                    numVal = $('#input_num').val();
                    
                    $('#dsip_num').empty();

                    // Input Check
                    if (numVal == '') {
                        $('#disp_num').text('Error : No input').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Replace
                    numVal = numVal.replace(/[0-9]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
                    if (!(numVal.match(/^[0-9]+$/))) {
                        $('#disp_num').text('Error : No numeral').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Set Comma
                    numVal = String(numVal).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
                    $('#disp_num').text(numVal).css({'background-color':'#00ff00'});

                })

            });

        --></script>

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

            div#main_area {
                margin      : 10px;
            }

            div#num_area {
                margin-top  : 20px;
            }

            #disp_num {
                padding     : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input id="input_num" />
            <button id="button">Set Comma</button>
            <div id="num_area"><span id="disp_num"></span></div>
        </div>

    </body>
</html>

sample

sample の text に数字(半角・全角)を入力して buttom を click すると入力した値を
半角数字にした上で「comma(,)」を追加して表示します。

うん、しっかり動きますね。
どちらも replace 関数を使用しています。
全角から半角の処理の場合は、対象の文字コードを半角の文字コードに置き換える形です。
また、カンマは数字の後ろが「数字 3文字が続き 且つ 4文字目が数字ではない文字列」の場合、
最初の数字にカンマを追加して表示しています。
・・・正規表現を文字にすると説明にくいですね。

まぁ、これで全角から半角への変換と3桁のカンマ区切りの処理が出来ました。
これでカンマ追加は怖くないですね(笑)

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

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

マウススクロール処理対策(chrome対応)

最近は 1ページが長いページが多いですね。
その中でページでの scroll について事前調査をしてみます。

内容としては chrome の時だけ scroll がガタツクようです。
う~ん、さすが chrome というべきか・・・
 # ちなみに私のメインブラウザは chrome です(笑)

■ 標準のページ

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

        <div id="main_area">
            <div class="disp_area">  1</div>
            <div class="disp_area">  2</div>
            <div class="disp_area"><省略></div>
            <div class="disp_area">499</div>
            <div class="disp_area">500</div>
        </div>

    </body>
</html>

sample0

sample0 にて scroll すると確かにカクツキますね・・・
さすが chrome です。確かに綺麗なデザインの場合にはちょっと残念かもしれません。
何とかしないと行けません。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script src="./jquery.mousewheel.min_.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 100;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollTop =  $('body').scrollTop() + tempSpeed;
                    } else {
                        scrollTop =  $('html').scrollTop() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollTop: scrollTop}, 'normal');
                    // scroll out
                    return false;

                });

            });

        --></script>

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

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div class="disp_area">  1</div>
            <div class="disp_area">  2</div>
            <div class="disp_area"><省略></div>
            <div class="disp_area">499</div>
            <div class="disp_area">500</div>
        </div>

    </body>
</html>

sample1

sample1 にて scroll するとカクツキがましになったのではないでしょうか。
ちなみに「var baseSpeed = 100;」の数値を変えると1回の scroll にて動く
幅は大きくなりますがもう少しスムーズにもなります。

ただ、今回の要求仕様ではそれもだめです。
もう少しスムーズにする方法を考えないと行けませんね・・・
とりあえず基本は出来ましたので、これで進めていこうかと思います。

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

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