タグ別アーカイブ: hover

立体的なボタン表示の切り替え

今回はヘッダーメニューで使えるかなという内容をやってみました。

<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 人がこの 投稿 は役に立ったと言っています。

リンク画像をマウスオーバー時に少し大きくして強調表示

今回はリンク画像を選択したときに、選択したリンク画像を少しだけ拡大表示をする処理です。
拡大表示は少しだけですが強調表示を行うにはいいのではないでしょうか。

<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_area img").hover(
                    function() {
                        $(this).stop().animate({
                            'margin-top'  : '-15px',
                            'margin-left' : '-10px',
                            'width'       : '250px',
                            'height'      : '100px'
                        }, 100);
                    }, 
                    function() {
                        $(this).stop().animate({
                            'margin-top'  : '0px',
                            'margin-left' : '0px',
                            'width'       : '220px',
                            'height'      : '80px'
                        }, 400);
                    }
                );

            });

        --></script>

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


    </head>
    <body>
        <div id="button_area">
            <a hreh="#"><img src="./icon_jpeg01.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg02.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg03.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg04.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg05.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg07.jpg"></a>
        </div>

    </body>
</html>

sample

これで選択したマウスオーバー時の強調表示が出来ました。

実際にはそれほど画像が大きくなるわけではありません。
でも、画像サイズが変わると思ったよりインパクトがありますね。
気軽に見た目を変更できるのは効果的かもしれません。

ただ、jQuery としての問題は「実は CSS だけでも表現できる。」ことですね。
以前に「入力用のウォーターマーク」の時にも愚痴ってましたが、jQuery では無くても出来ることが増えてますよね・・・
まだまだ jQuery を使用しないと出来ないことはありますが、さびしい限りですねぇ・・・

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

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

ドロップダウンでの開閉表示

今回はドロップダウンでの開閉表示を作ってみます。

とりあえず、こんな感じです。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {
                
                $('#label').hover(
                    function(){ 
                        $('#drop_box').slideDown('normal');
                    },
                    function(){
                        $('#drop_box').slideUp('normal');
                    }
                );
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #drop_box {
                height           : 100px;
                width            : 200px;
                background-color : #ffcccc;
                border-color     : #ffffff;
                display          : none;
            }
            
        --></style>
        
    </head>
    <body>
        
        <span id="label">On Mouse</span>
        
        <div id="drop_box">Display Box1 Area</div>
        
    </body>
</html>

sample

「On Mouse」にマウスを乗せるとドロップダウンの領域が表示されます。

実は上記内容は slideToggle の方が簡単にできます。
ただし、開く時と閉じる時のスピードを変更できないようなんです。
う~ん。細かい設定をしたいときに slideToggle は使えないなぁ・・・

■おまけ?
jQuery のドロップダウンは以下のような動きをします。
・slideDown  スライドダウンして開く
・slideUp   スライドアップして閉じる
・slideToggle slideDown/slideUpの動作を交互に行って開閉する

そうです、上部にスライドアップして表示する機能がないんです。
 ※「そういった機能が存在するぞ」って言う方、お教えいただければ幸いです。

そこで、こんなやり方はどうでしょう。
ドロップダウン(スライドアップ表示もどき)

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {
                
                $('#label').hover(
                    function(){ 
                        $('#dummy_box').slideUp('normal');
                        $('#drop_box').slideDown('normal');
                    },
                    function(){
                        $('#drop_box').slideUp('normal');
                        $('#dummy_box').slideDown('normal');
                    }
                );
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #drop_box {
                height           : 100px;
                width            : 200px;
                background-color : #ffcccc;
                border-color     : #ff0000;
                display          : none;
            }
            #dummy_box {
                height           : 100px;
                width            : 200px;
                background-color : #ccccff;
                border-color     : #0000ff;
            }
        --></style>
        
    </head>
    <body>
        
        <div id="dummy_box">Dummy Area</div>
        <div id="drop_box">Display Box1 Area</div>
        
        <span id="label">On Mouse</span>
        
    </body>
</html>

sample 2

これで、見た目上はスライドアップして表示されるように見えます。
えぇ、見えます。
断じて見えるはずです。(笑)

行っている手順は以下の通りです。
なお、実際に使用するときは、「Dummy Area」の領域の透明度を変更して見えないようにしてください。

1.ダミーの領域を事前に表示しておく。
2.オンマウス時に以下の処理を行う。
  ・ダミー領域をスライドアップして非表示状態にする。
  ・表示領域をスライドダウンして表示状態にする。
※スライドアップとスライドダウンの表示速度は同じにしてください。

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

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