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

円形表示

前回に引き続き円形の作成です。
アニメーションが無い場合、CSS の border-radius を使用することで円形は描くことが出来ますが、
jQuery を利用してやったみたいと言うのが本音です。
それではやってみましょう。

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

                    // initialization
                    $('div.now_line').css('fontSize', 0);

                    $('div.now_line').animate(
                        {
                            fontSize : 1
                        },
                        {
                            duration : 10000,    // animate time ( second 10 )
                            step     : function(step){
                                           $('div.now_line').clone().removeClass('now_line').appendTo('#disp_area').css({transform:'rotateZ(' + (step * 360) + 'deg)'});
                                       }
                        }
                    );

                });

            });

        --></script>

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


            #disp_area {
                margin-top  : 100px;
                margin-left : 200px;
            }


            div.line {

                position         : absolute;
                width            : 3px;
                height           : 100px;
                background-color : #ff0000;

                fontSize         : 0; 
                -webkit-transform-origin : 100% 100%;
                -moz-transform-origin    : 100% 100%;
                -ms-transform-origin     : 100% 100%;
                -o-transform-origin      : 100% 100%;
                transform-origin         : 100% 100%;
            }


        --></style>

    </head>

        <button>Click!!!</button>
        <div id="disp_area">
            <div class="line now_line"></div>
        </div>

    </body>
</html>

sample

spmple の Button を Click すると円を描くかと思います。

今回は animation 機能を使用して作成しています。
ですがあまり速い動きは出来ませんでした。
回転してクローンを作成しての繰り返しのため、あまり速くすると隙間が空いてしますためです。
扇型ってどう表現すればいいんでしょう、図形って難しいですね・・・・

う~ん、とりあえずこの間調べた各種プラグインの表示方法はこんなに変では無かった気がします。
いろんなプラグインで動作させているのはどのような方法なんだろう・・・

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

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

回転して円を描くアニメーション

この間 Plugin でグラフの表示を行いましたが、改めて考えると円表示をどうやっているの理解できていないですね。
とりあえず今回は円グラフの表示に使用出来るかも知れない動きを試してみます。

<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 leftPoint = 300;
                var topPoint  = 150;
                var radius    = 100;
                var angle     = 0;
                var speed     = 0.002;

                setInterval(function(){
                    $('#disp_area img').css({
                        left : (leftPoint + (radius * Math.cos( Math.PI * angle * speed) ) ) + 'px',
                        top  : (topPoint  + (radius * Math.sin( Math.PI * angle * speed) ) ) + 'px'
                    });
                    angle++;
                },1);

            });

        --></script>

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

            #disp_area img {
                position         : absolute;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <img src="./icon_jpeg15.jpg">
        </div>

    </body>
</html>

sample

spmple を表示する多画像が回転している事を確認していただけるかと思います。

やってみると意外と複雑ですね。
最初は以前の「上下に動くアニメーション」に左右の動きをつければ動作するんじゃないかと思いましたが、
結果として四角形を描く動作になってしまいました・・・
よく考えればそうですよね、ということで「Math」を使用しています。
数学は苦手なんですがこれで大丈夫ですかねぇ・・・

まぁ、何にせよアニメーションの円動作の基礎は出来たかと思います。
・・・こうして見ると円グラフは難しいんですね、グラフの円を表示する方も難しそうですね。
特に題材が無ければ次回は円を表示する方法を考えてみたいと思います。

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 scroll_point;
                var image_top;
                var image_left;
                $(window).scroll( function() {

                    scroll_point = $(window).scrollTop() + (window.innerHeight / 2);
                    image_top    = $('#target_area img').offset().top;
                    image_left   = $('#target_area').outerWidth();

                    if ( scroll_point >= image_top) {
                        // start
                        $('#target_area img').animate({left: image_left + 'px'}, {duration: 'normal'});
                    } else {
                        // reset
                        $('#target_area img').stop(true,false).css('left', 0);
                    }

                });

            });

        --></script>

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

            #disp_area {
                margin      : 50px;
            }

            #target_area {
                padding-top : 2000px;
                width       : 500px;
            }

            #target_area img {
                position         : absolute;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <p>Please scroll.</p>
            <div id="target_area">
                <img src="./icon_jpeg15.jpg">
            </div>
        </div>

    </body>
</html>

sample

spmple では最初は何も表示していません。
下にスクロールしていくと、所定の位置でアニメーションが動作します。

スクロールしていくと「所定の位置で動作する」、これは意外と目を引きますね。
色を変えることやサイズを変えることなども変更可能です。
なかなか興味深いものですね。

用途さえ合えば色々なところで使用していきたいですね。

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

                // loupe div
                var loupe         = $('#loupe');
                // image
                var img_thumbnail = $('#img_thumbnail');
                var img_loupe     = $('#img_loupe');

                var thumb_offest  = img_thumbnail.offset();
                var thumb_width   = img_thumbnail.outerWidth();
                var thumb_height  = img_thumbnail.outerHeight();
                var loupe_m_left  = 25;
                var loupe_m_top   = 25;


                // mouse 
                img_thumbnail.mousemove(function (obj) {

                    if (obj.pageX > thumb_width  + thumb_offest.left + 10 || obj.pageX < thumb_offest.left - 10 ||
                        obj.pageY > thumb_height + thumb_offest.top  + 10 || obj.pageY < thumb_offest.top  - 10) {
                        loupe.hide();
                        return;
                    }

                    loupe.show().css({
                        left : obj.pageX + loupe_m_left,
                        top  : obj.pageY + loupe_m_top
                    });
                    
                    img_loupe.css({
                        left : (-(obj.pageX * 2) + (150 / 2)) |0,
                        top  : (-(obj.pageY * 2) + (150 / 2)) |0
                    });

                });
                loupe.hide();

            });


        --></script>

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

            #disp_area {
                margin     : 10px;
            }

            #loupe {
                width      : 150px;
                height     : 150px;
                position   : fixed;
                overflow   : hidden;
                background : rgba(50, 50, 50, 0.25) ;
                border     : 5px solid rgba(0, 0, 0, 1);
                cursor     : none;
            }

            #img_loupe {
                width      : 960px;
                height     : 350px;
                position   : absolute;
            }

            #img_thumbnail {
                width      : 480px;
                height     : 175px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <img id="img_thumbnail" src="./image_jpeg.jpg">
        </div>

        <div id="loupe">
            <img id="img_loupe" src="./image_jpeg.jpg">
        </div>

    </body>
</html>

sample

spmple では Image にマウスを乗せると指定部分の拡大画像が表示されます。

う~ん、作っておいてなんですが、一般的なルーペ機能はどう作っているんでしょうか。
とりあえず今回はサムネイルの画像上の指定部分の位置情報を取得して、位置情報から拡大部分の画像を表示しています。
拡大部分に関しては、はみ出た部分を非表示にすることで対応しています。

画像のサイズに関して CSS による拡大では画質が粗くなります。
画質を荒くしないためには実際のサイズの画像を拡大時用の画像として表示していますが、
サムネイルは CSS での縮小表示をさせています。
通常は拡大画像とサムネイルの画像は二つ用意するんでしょうか。

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

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