jquery - jQuery Slider - 全宽 - 从中间打开自身

Question

我必须这样做：

在此处输入图像描述

你会怎么做？你会使用 jQuery 插件吗？

非常感谢

score 0 · Accepted Answer

快乐的，

最棘手的方面是让 HTML 和 CSS 正确。jQuery 使 javascript 变得相当简单。

可以通过邻接同一图像的两个剪辑实例来实现图像的分割。这样做的逻辑可以完全在样式表中，但由于剪裁算法很难解决，所以在 javascript 中更简单。因此，可以通过更改一个值来调整拆分；如果此值将分割置于图像边界之外，则图像将完全位于上半部分或下半部分，并且将保持不变。

这是一个示例页面 - 它并不能满足您的所有需求，但可以帮助您入门。

<!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] 按钮。
图像分割逻辑适用于左列中的单个图像；正如代码所示，没有其他图像会分裂。

Doctype：我在本地使用 XHTML doctype 进行了测试（如上），但在 jsFiddle 中一切正常，无需修改，因此在 HTML5 下似乎没问题。

jQuery : 1.7.1+

jquery - jQuery Slider - 全宽 - 从中​​间打开自身

1 回答 1

Related

Reference

jquery - jQuery Slider - 全宽 - 从中间打开自身