タグ別アーカイブ: appendTo

一覧の「もっとみる」ボタン

今回は一覧の「もっと見る」ボタンです。
実際のデータ取得の方法は ajax などを使用するなどの対応が必要ですが、
とりあえず 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 () {
                    $('div.areaDays').last().clone().appendTo('#disp_area');
                    setDateTime();
                });

                function setDateTime () {
                    var now   = new Date();
                    var nowDY = now.getFullYear();
                    var nowDM = now.getMonth() + 1;
                    var nowDD = now.getDate();
                    var nowTH = now.getHours();
                    var nowTM = now.getMinutes();
                    var nowTS = now.getSeconds();
                    var objDays = $('div.areaDays').last();
                    objDays.find('.dateY').html(nowDY);
                    objDays.find('.dateM').html(nowDM);
                    objDays.find('.dateD').html(nowDD);
                    objDays.find('.timeH').html(nowTH);
                    objDays.find('.timeM').html(nowTM);
                    objDays.find('.timeS').html(nowTS);
                }

                // init
                setDateTime();

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            #button_area {
                clear            : both;
            }

            button {
                margin           : 5px;
            }

            div.areaDays {
                clear            : both;
            }
            div.areaDays dl {
                float            : left;
                margin           : 10px;
                padding          : 10px;
            }
            div.areaDays dl.areaDate {
                float            : left;
                background-color : #ffcccc;
                width            : 200px;
            }
            div.areaDays dl.areaTime {
                float            : left;
                background-color : #ccccff;
                width            : 200px;
            }
            div.areaDays dt {
            }
            div.areaDays dd {
                padding-bottom   : 10px;
                padding-left     : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="disp_area">

                <div class="areaDays">
                    <dl class="areaDate">
                        <dt>Date Year</dt>
                        <dd class="dateY">YEAR</dd>
                        <dt>Date Month</dt>
                        <dd class="dateM">MONTH</dd>
                        <dt>Date Day</dt>
                        <dd class="dateD">DAY</dd>
                    </dl>
                    <dl class="areaTime">
                        <dt>Time Hour</dt>
                        <dd class="timeH">HOUR</dd>
                        <dt>Time Minute</dt>
                        <dd class="timeM">MINUTE</dd>
                        <dt>Time Second</dt>
                        <dd class="timeS">SECOND</dd>
                    </dl>
                </div>

            </div>

            <div id="button_area">
                <button id="button">more</button>
            </div>

        </div>
    </body>
</html>

sample

sample の button を click すると現在時刻が追加されます。
実際のデータ取得は別処理にはなりますが追加していくロジックとしては
上出来ではないでしょうか。

また、一回に追加する件数を増やす場合も loop 処理をすれば行けると思います。
実際に全てのデータをとっても良いのですが・・・
やはりサーバーへの負荷は少しでも下げたいですからね。

何か案件か決まっている訳ではないのですが、何かの際には使ってみたいですね。

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

                function exeImageMove (id) {

                    $('#main_area .thumbnail').appendTo('#thumb_area');

                    backImage = 'none';
                    switch (id){
                        case 'thumb01':
                            backImage = 'image_jpeg01.jpg';
                            break;
                        case 'thumb02':
                            backImage = 'image_jpeg02.jpg';
                            break;
                        case 'thumb03':
                            backImage = 'image_jpeg03.jpg';
                            break;
                        case 'thumb04':
                            backImage = 'image_jpeg04.jpg';
                            break;
                    }
                    $('#back_area').css('background-image', 'url(' + backImage +')');

                    $('#' + id).appendTo('#main_area');

                }

                $('div#thumb_area div.thumbnail').click(function () {
                    exeImageMove($(this).attr('id'));
                });
                exeImageMove('thumb01');

            });

        --></script>

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

            div {
                margin              : 10px;
            }

            div#back_area {
                width               : 960px;
                height              : 350px;
                background-repeat   : no-repeat;
                background-position : center;
                background-size     : cover;
            }

            div.thumbnail {
                position            : relative;
                float               : left;
                width               : 220px;
                height              : 80px;
                background-repeat   : no-repeat;
                background-position : center;
                background-size     : cover;
                border              : solid 5px #0000ff;
            }

            div#thumb01 {
                background-image    : url('icon_jpeg09.jpg');
            }
            div#thumb02 {
                background-image    : url('icon_jpeg05.jpg');
            }
            div#thumb03 {
                background-image    : url('icon_jpeg17.jpg');
            }
            div#thumb04 {
                background-image    : url('icon_jpeg18.jpg');
            }

            div#thumb_area {
                width               : 960px;
                height              : 120px;
            }
            
            div#main_area div.thumbnail {
                float               : right;
                width               : 440px;
                height              : 160px;
                margin-top          : 30px;
                border              : solid 5px #000000;
            }

        --></style>

    </head>
    <body>

        <div id="back_area">
            <div id="thumb_area">
                <div id="thumb01" class="thumbnail"></div>
                <div id="thumb02" class="thumbnail"></div>
                <div id="thumb03" class="thumbnail"></div>
                <div id="thumb04" class="thumbnail"></div>
            </div>
            <div id="main_area"></div>
        </div>

    </body>
</html>

sample

sample の青色の枠に選択された thumbnail を click すると
選択した thumbnail を右下に拡大して表示すると共に背景の変更を行います。

どうでしょう、中々目を引くと思いますが・・・
thumbnail のサイズや背景をデザイン的に考慮するとそれなりに使えると思います。
デザイン的に綺麗にすることは前提ですが、誰かに使ってもらえるといいなぁ。

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

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

フリックでのサムネイル表示変更(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 人がこの 投稿 は役に立ったと言っています。

ループするサムネイル

今回はサムネイル表示についてループ処理させてみました。
意外と使うことがありそうです。
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 人がこの 投稿 は役に立ったと言っています。

ページの無限ループ (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(){

                var loopWidth = $('#main_area').children('span').width();
                    $('#main_area span').clone().appendTo('#main_area');

                function execSideLoop() {
                    $('#main_area').css({left:'0'});
                    $('#main_area').stop().animate({left:'-' + loopWidth + 'px'}, 25000, 'linear', execSideLoop);
                };

                execSideLoop();

            });

        --></script>

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

            #main_area {
                white-space : nowrap;
                position : absolute;
                top : 0px;
            }

            #main_area span {
                float : float;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <span>
                    text00 text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12 text13 text14 text15 text16 text17 text18 text19 text20 text21 text22 text23 text24 text25 text26 text27 text28 text29 text30 text31 text32 text33 text34 text35 text36 text37 text38 text39 text40 text41 text42 text43 text44 text45 text46 text47 text48 text49 text50
                </span>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを左に自動スクロールをしています。

この機能自体は優秀な plugin が多くありますので、実際の Webサイトを作成することは無いと思います。
まあ、そんな実際には作成することのない機能について、どうやれば再現できるかの勉強ですね。
実際に触ってみると色々と勉強になるものですね。

出来た内容は往年の MARQUEE ですね(笑)
実際には文字だけでは使い道は無いですが、画像などを使用しないと華がないなぁ。

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

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