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

フリックでのサムネイル表示変更

前回はサムネイル表示のループをしてみました。
すると「PC版では良いけれどスマホ版ではclick ではなくtouch での作業をしたい」とのこと・・・
今回は一度試してみます。

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

                $('#loop_area').bind({
                    'touchstart': function(eObj) {
                        this.touchX = event.changedTouches[0].pageX;
                        this.slideX = $(this).position().left;
                    },
                    'touchmove': function(eObj) {
                        eObj.preventDefault();
                        this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX );
                        $(this).css({left:this.slideX});
                        this.touchX = event.changedTouches[0].pageX;
                    },
                    'touchend': function(eObj) {
                        var sizeSet = (-2200 + 660);
                        if (this.slideX > 0) {
                           this.slideX = 0;
                           $(this).animate({left:'0px'}, 'normal');
                        } else if (this.slideX < sizeSet) {
                           this.slideX = sizeSet;
                           $(this).animate({left: sizeSet + 'px'}, 'normal');
                        }
                    }
                });

            });

        --></script>

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

            #thumb_area {
                top              : 50px;
                left             : 100px;
                width            : 660px;
                height           : 80px;
                overflow         : hidden;
                position         : relative;
            }

            #loop_area {
                width            : 2200px;
                position         : absolute;
            }

            #loop_area div {
                float            : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="thumb_area">
                <div id="loop_area">
                    <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                </div>
            </div>
        </div>

    </body>
</html>

sample

sample はPC版では何も起きません スマホなどでは「フリック」をするとサムネイルの
表示を変更できます。

う~ん、私自体が余りスマホしていないこともあり、操作感はあまり分かりません。
ただ、そんな私でもギコチナイ動きをしてることは分かります・・・
操作している指を離すと止まっちゃいます。
どこかに easing を設定すれば問題なのかもしれませんが・・・
難しいものですね。

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 loopWidth = 220;

                $('#loop_area div').clone().appendTo('#loop_area');

                $('#div_prev').click(function() {
                    $('#loop_area').stop().animate({left:'-' + loopWidth + 'px'}, 'slow', 'linear', function() {
                        $('#loop_area div:first-child').appendTo('#loop_area');
                        $('#loop_area').css({left:0});
                    });
                });

                $('#div_next').click(function() {
                    $('#loop_area div:last-child').prependTo('#loop_area');
                    $('#loop_area').css({left:'-' + loopWidth + 'px'});
                    $('#loop_area').stop().animate({left:'' + 0 + 'px'}, 'slow', 'linear', function() {
                    });
                });

            });

        --></script>

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

            #main_area div {
                float            : left;
            }

            #thumb_area {
                top              : 0px;
                left             : 0px;
                width            : 660px;
                height           : 80px;
                overflow         : hidden;
                position         : relative;
            }

            #loop_area {
                width            : 2200px;
                position         : absolute;
            }

            #loop_area div {
                float            : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="div_prev" class="thumb_move">
                <span>&lt;&lt;</span>&nbsp;
            </div>
            <div id="thumb_area">
                <div id="loop_area">
                    <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                </div>
            </div>
            <div id="div_next" class="thumb_move">
                &nbsp;<span>&gt;&gt;</span>
            </div>
        </div>

    </body>
</html>

sample

sample ではサムネイルが何枚か並んでいます。
左右の矢印を click するとサムネイルが動きます。
サムネイルは 10 枚ですが押し続けることで永遠に ループします。

今回は簡単な画像を使用したサムネイルをループさせて見ました。
実際には複数毎に移動させることなども可能ですね。
枚数が増えた時には複数枚単位での移動を試みていても面白いと思います。

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

                setInterval(function () {

                    $('.image_div').fadeOut();
                    
                    nowCount += 1;
                    switch (nowCount % 10) {
                        case 1:
                            $('#disp_image01').fadeIn();
                            break;
                        case 2:
                            $('#disp_image02').fadeIn();
                            break;
                        case 3:
                            $('#disp_image03').fadeIn();
                            break;
                        case 4:
                            $('#disp_image04').fadeIn();
                            break;
                        case 5:
                            $('#disp_image05').fadeIn();
                            break;
                        case 6:
                            $('#disp_image06').fadeIn();
                            break;
                        case 7:
                            $('#disp_image07').fadeIn();
                            break;
                        case 8:
                            $('#disp_image08').fadeIn();
                            break;
                        case 9:
                            $('#disp_image09').fadeIn();
                            break;
                        case 0:
                            $('#disp_image10').fadeIn();
                            break;
                    }

                }, 2000);

            });

        --></script>

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

            div .image_div{
                margin   : 30px;
                position : absolute;
                display  : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="disp_image01" class="image_div"><img src="./icon_jpeg01.jpg"></div>
            <div id="disp_image02" class="image_div"><img src="./icon_jpeg02.jpg"></div>
            <div id="disp_image03" class="image_div"><img src="./icon_jpeg03.jpg"></div>
            <div id="disp_image04" class="image_div"><img src="./icon_jpeg04.jpg"></div>
            <div id="disp_image05" class="image_div"><img src="./icon_jpeg05.jpg"></div>
            <div id="disp_image06" class="image_div"><img src="./icon_jpeg06.jpg"></div>
            <div id="disp_image07" class="image_div"><img src="./icon_jpeg07.jpg"></div>
            <div id="disp_image08" class="image_div"><img src="./icon_jpeg08.jpg"></div>
            <div id="disp_image09" class="image_div"><img src="./icon_jpeg09.jpg"></div>
            <div id="disp_image10" class="image_div"><img src="./icon_jpeg10.jpg"></div>
        </div>

    </body>
</html>

sample

sample を表示して暫くすると時間によって画像が切り替わります。

特にこれといって特殊な事をしているわけではありませんが、画像の切り替えは
一度試して見たかったのですがどうでしょうか。

以外としっかりした形になった気がします。
お試しください。

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 nowSecond = 0;
                
                $(window).click(function(){
                    nowSecond = 0;
                    $('#second_area').text(nowSecond);
                    $('#disp_area').text('');
                });

                function countTimer() {

                    $('#second_area').text(nowSecond);

                    if ((nowSecond % 10) == 0 && nowSecond > 0) {
                        $('#disp_area').text('elapsed ' + nowSecond + ' second');
                    }

                    nowSecond += 1;
                }
                setInterval(countTimer, 1000);

            });

        --></script>

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

            div {
                margin : 30px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="timer_area"><span id="second_area">0</span> second</div>
            <div id="disp_area"></div>
        </div>

    </body>
</html>

sample

sample では一定時間 click が無かった際にメッセージを表示します。
時間の確認のため画面上には前回のクリックからの経過秒数を表示しています。

通常は時間経過後に処理をする場合には以前の delay などを
使用すれば事は足りるのですが、一致時間の間何もしない(今回は click をしない)
ことを検知するとなると一手間必要になります。

今回はとりあえず文言の変形だけですが、経過した秒数で処理が変更できるのは
以外と便利なのかもしれません。

時間が経ったときに行う処理を変更することでで色々なことを実行出来ます。
たとえば前のアクションからの経過時間によって画像を入れ替えたりとかですね。
経過時間によって内容が変化すれば中々楽しみが増えそうですねぇ。

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

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