jquery - jQuery Slider - 全幅 - 真ん中から開く

Question

私はそれをしなければなりません：

ここに画像の説明を入力

どのようにしますか？jQueryプラグインを使用しますか?

どうもありがとうございました

score 0 · Accepted Answer

幸せ、

これの最も厄介な側面は、HTML と CSS を正しくすることです。jQuery は、javascript をかなり簡単にします。

画像の分割は、クリップされた同じ画像の 2 つのインスタンスを隣接させることで実現できます。このロジックは完全にスタイルシートに記述できますが、クリッピング演算は難しいため、javascript で行う方が簡単です。したがって、分割は1 つの値を変更することで調整できます。この値が分割を画像境界の外に置く場合、画像は完全に上半分または下半分になり、元のままになります。

ここにサンプルページがあります。必要なすべての機能を備えているわけではありませんが、すぐに使用を開始できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#outerWrapper {
    width: 900px;
}
.half {
    position: relative;
    border: 0px solid #000;
}
#topHalf {
    height: 250px;
}
#bottomHalf {
    height: 150px;
}
.leftColumn {
    width: 190px;
    float: left;
}
.content {
    width: 698px;
    padding: 0 5px;
    height: 100%;
    float: left;
    background-color: #e0e0e0;
    border: 1px solid #909090;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#openers {
    font-family: monospace;
    position: absolute;
    bottom: 5px;
}
.opener {
    font-family: monospace;
    width: 90px;
    color: #111;
}
.opener.selected {
    font-weight: bold;
}
.splitImg {
    position: absolute;
    display: none;
}
#centerWrapper {
    clear: both;
    display: none;
    width: 900px;
}
#hiddenMenus {
    display: none;
}
.centerSection {
    position: relative;
    width: auto;
    padding: 10px;
    background-image: url("http://www.teacherfiles.com/clipart/xbackgrounds/graph_paper.jpg");
    height: 100px;
}
.centerSection h3 {
    width: 810px;
    margin: 0;
    padding: 1px 12px;
    background-color: #e0e0e0;
    border: 4px double #99C;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-family: verdana,helvetica,arial,sans-serif;
    font-size: 14px;
    color: #006;
    letter-spacing: 0.3em;
}
.centerSection .close {
    position: absolute;
    right: 10px;
    top: 13px;
    font-family: verdana,helvetica,arial,sans-serif;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    //The image is "split" by abutting two clipped instances of same image.
    //Splitting can be achieved in the stylesheet but the arithmetic is tricky 
    //so we do it in javascript. Just set `dims` to be compatible with the 
    //image (and width & height set in the HTML) and the rest will look after itself. 
    // *****
    var dims = {w:180, h:120, v:60};//image width(px), image height(px), vertical_split from top (px)
    // *****
    var rect_top    = [0,      dims.w, dims.v, 0];
    var rect_bottom = [dims.v, dims.w, dims.h, 0];
    var $t = $("#topImg").css({
        bottom: (dims.v - dims.h) + 'px',//this will be negative
        clip: 'rect(' + rect_top.join('px,') +'px)'
    }).show();
    var $b = $("#bottomImg").css({
        top: '-' + dims.v + 'px',//this will be negative
        clip: 'rect(' + rect_bottom.join('px,') +'px)'
    }).show();
    $b.attr({ src:$t.attr('src'), width:$t.width(), height:$t.height() });
});

$(function() {
    //Set button widths to allow dynamic bold style without jog
    var $openers = $(".opener").each(function(){
        var $o = $(this);
        $o.width((7 * (1 + $o.text().length)) + 'px');
    });
});

$(function() {
    //add close buttons to the menu sections
    $(".centerSection h3").each(function() {
        $('<button class="close">X</button>').insertBefore($(this));
    });
});

$(function() {
    //Open and close the centre menus section
    var $$ = {//jQuery object cache
        centerWrapper: $("#centerWrapper"),
        hiddenMenus: $("#hiddenMenus"),
        defaultMenu: $("#defaultMenu")
    };
    var $openers = $(".opener").on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var $link = $(this),
            $old = $$.centerWrapper.find(".centerSection"),
            $new = $($link.attr('rel')),
            speed = 1000,//'slow',
            open = function() {
                unload();
                $$.centerWrapper.append($new).slideDown(speed);
                $link.addClass('selected');
            },
            unload = function(){
                $old.appendTo($$.hiddenMenus);//unload
                $openers.removeClass('selected');
            };
        $new = (!$new.length) ? $$.defaultMenu : $new;
        $$.centerWrapper.stop();
        if( $old.length ) { //if a centerSection is currently loaded
            var fn = ( $new.get(0) == $old.get(0) ) ? unload : open;
            $$.centerWrapper.slideUp(speed, fn);//close then either unload or reopen 
        }
        else { open(); } //open from closed
    });
    function close(e) {
        $openers.filter(".selected").trigger('click');
    }
    $(".centerSection").on('click', function(e) {
        e.stopPropagation();
    }).on('click', '.close', close);
    $(document).on('click', close);
});
</script>
</head>

<body>

<div id="outerWrapper">
    <div class="half" id="topHalf">
        <div class="leftColumn">
            <span>&nbsp;</span>
            <img class="splitImg" id="topImg" src="http://www.childrenshealthyfood.com/healthy-food-schools/pics/healthy-foods/fresh-fruit-and-vegetables.jpg" width="180" height="120" />
        </div>
        <div class="content">
            <h2>Top Half</h2>
            <div id="openers">
                <!--a class="opener" href="#" rel="#cocktail">Cocktail Menu</a>
                <a class="opener" href="#" rel="#buffet">Buffet Menu</a-->
                <span>Menus:</span>
                <button class="opener" rel="#cocktailMenu">Cocktails</button>
                <button class="opener" rel="#buffetMenu">Buffet</button>
                <button class="opener" rel="#luncheonMenu">Luncheon</button>
            </div>
        </div>
    </div>

    <div id="centerWrapper"></div>

    <div class="half" id="bottomHalf">
        <div class="leftColumn">
            <span>&nbsp;</span>
            <img class="splitImg" id="bottomImg" /><!-- src, width and height are set dynamically -->
        </div>
        <div class="content">
            <h2>Bottom Half</h2>
        </div>
    </div>
</div>

<div id="hiddenMenus">
    <div class="centerSection" id="cocktailMenu">
        <h3>Cocktail Menu</h3>
    </div>
    <div class="centerSection" id="buffetMenu">
        <h3>Buffet Menu</h3>
    </div>
    <div class="centerSection" id="defaultMenu">
        <h3>Menu not found</h3>
    </div>
</div>

</body>
</html>

デモ

Opera 12.02 および IE9 でテスト済み。

不足しているもの:

「クラムシェル」オープニング; 達成するためにもっと努力が必要だろう
メニューを閉じるには; リンクにはトグルアクションがあります。開いているメニュー以外の場所をクリックします。開いている各メニューの右上に動的に挿入された [x] ボタンをクリックします。
画像分割ロジックは、左側の列の 1 つの画像に適用されます。コードのとおり、他の画像は分割されません。

Doctype : XHTML doctype (上記のように) を使用してローカルでテストしましたが、jsFiddle ではすべてが変更なしで機能するため、HTML5 では問題ないようです。

jQuery : 1.7.1+

jquery - jQuery Slider - 全幅 - 真ん中から開く

1 に答える 1

Related

Reference