カテゴリー別アーカイブ: タッチパネル

フリックでのサムネイル表示変更(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(){

                $('#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 );
                    },
                    'touchend': function(eObj) {
                        var loopWidth = 220;
                        if (this.slideX > 0) {
                            $('#loop_area div:last-child').prependTo('#loop_area');
                            $('#loop_area').css({left:'-' + loopWidth + 'px'});
                            $('#loop_area').stop().animate({left:'' + 0 + 'px'}, 'slow', 'linear', function() {
                            });
                        } else {
                            $('#loop_area').stop().animate({left:'-' + loopWidth + 'px'}, 'slow', 'linear', function() {
                                $('#loop_area div:first-child').appendTo('#loop_area');
                                $('#loop_area').css({left:0});
                            });
                        }
                    }
                });

            });

        --></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版では何も起きません スマホなどでは「フリック」をするとサムネイルの
表示を変更できます。
前回との違いはフリックするたびに一定の幅づつ移動しているところです。

一定の幅を移動すると前回までと比べて引き締まったように見えますね。
これなら満足できるかと思います、・・・私はですけどね(笑)

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

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

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

前回はサムネイル表示のループをしてみました。
すると「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 人がこの 投稿 は役に立ったと言っています。