jQuery滑块-全宽-从中间打开_Jquery_Animation_Slider_Width

jQuery滑块-全宽-从中间打开

jquery animation

jQuery滑块-全宽-从中间打开,jquery,animation,slider,width,Jquery,Animation,Slider,Width,我必须这样做：你会怎么做？你会使用jQuery插件吗非常感谢很高兴最棘手的方面是正确使用HTML和CSS。jQuery使得javascript相当简单图像的分割可以通过邻接相同图像的两个剪裁实例来实现。其逻辑可以完全在样式表中，但由于裁剪算法很难实现，因此在javascript中实现更简单。因此，可以通过改变一个值来调整分割；如果此值使分割超出图像边界，则图像将完全位于上半部分或下半部分，并保持完整这里是一个示例页面-它并没有做你想要的一切，但会让你开始 <!DOCTYPE h

我必须这样做：

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

非常感谢

很高兴

最棘手的方面是正确使用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>


#外衣{
宽度：900px；
}
.一半{
位置：相对位置；
边框：0px实心#000；
}
#上半身{
高度：250px；
}
#下半身{
高度：150像素；
}
.leftColumn{
宽度：190px；
浮动：左；
}
.内容{
宽度：698px；
填充：0 5px；
身高：100%；
浮动：左；
背景色：#E0；
边框：1px实心#9090；
-moz边界半径：10px；
边界半径：10px；
}
#开场白{
字体系列：monospace；
位置：绝对位置；
底部：5px；
}
开瓶器{
字体系列：monospace；
宽度：90px；
颜色：#111；
}
.opener.selected{
字体大小：粗体；
}
.分裂{
位置：绝对位置；
显示：无；
}
#中心包装{
明确：两者皆有；
显示：无；
宽度：900px；
}
#隐藏菜单{
显示：无；
}
.centerSection{
位置：相对位置；
宽度：自动；
填充：10px；
背景图像：url（“http://www.teacherfiles.com/clipart/xbackgrounds/graph_paper.jpg");
高度：100px；
}
.h3段{
宽度：810px；
保证金：0；
填充：1px12px；
背景色：#E0；
边框：4倍双色#99C；
-moz边界半径：15px；
边界半径：15px；
字体系列：verdana、helvetica、arial、无衬线字体；
字体大小：14px；
颜色：#006；
字母间距：0.3em；
}
.centerSection.关闭{
位置：绝对位置；
右：10px；
顶部：13px；
字体系列：verdana、helvetica、arial、无衬线字体；
}
$（函数（）{
//通过邻接同一图像的两个剪裁实例来“分割”图像。
//拆分可以在样式表中实现，但算法很复杂
//所以我们用javascript来实现。只需将'dims'设置为与
//图像（以及HTML中设置的宽度和高度）和其他内容将自行处理。
// *****
var dims={w:180，h:120，v:60}；//图像宽度（px），图像高度（px），从顶部垂直分割（px）
// *****
var rect_top=[0，dims.w，dims.v，0]；
var rect_bottom=[dims.v，dims.w，dims.h，0]；
var$t=$（“#topImg”）.css({
底部：（dims.v-dims.h）+px'，//这将是负数
剪辑：“rect（'+rect_top.join（'px'，）+px）”
}).show（）；
var$b=$（“#bottomImg”）.css({
顶部：'-'+dims.v+'px'，//这将是负数
剪辑：“rect（'+rect_bottom.join（'px'，）+px）”
}).show（）；
$b.attr（{src:$t.attr（'src'），宽度：$t.width（），高度：$t.height（）}）；
});
$（函数（）{
//设置按钮宽度以允许动态粗体样式，而无需点动
var$openers=$（“.opener”）.each（函数（）{
var$o=$（本）；
$o.width（（7*（1+$o.text（）.length））+'px'）；
});
});
$（函数（）{
//将关闭按钮添加到菜单部分
$（“.centerSection h3”）。每个（函数（）{
$（'X'）.insertBefore（$（this））；
});
});
$（函数（）{
//打开和关闭中央菜单部分
var$$={//jQuery对象缓存
centerWrapper:$（“#centerWrapper”），
隐藏菜单：$（“#隐藏菜单”），
默认菜单：$（“#默认菜单”）
};
var$openers=$（“.opener”）。在（'click'，函数（e）上{
e、 停止传播（）；
e、 预防默认值（）；
var$link=$（此），
$old=$$.centerWrapper.find（“.centerSection”），
$new=$（$link.attr（'rel'）），
速度=1000，/“慢”，
open=函数（）{
卸载（）；
$$.centerWrapper.append（$new）.slideDown（速度）；
$link.addClass（'selected'）；
},
卸载=函数（）{
$old.appendTo（$$.hiddenMenus）；//卸载
$openers.removeClass（'selected'）；
};
$new=（！$new.length）？$$.defaultMenu:$new；
$$.centerWrapper.stop（）；
如果（$old.length）{//如果当前加载了centerSection
var fn=（$new.get（0）=$old.get（0））？卸载：打开；
$$.centerWrapper.slideUp（速度，fn）；//关闭，然后卸载或重新打开
}
else{open（）；}//从关闭状态打开
});
功能关闭（e）{
$openers.filter（“.selected”）.trigger（'click'）；
}
$（“.centerSection”）。在（'click'，函数（e）{
e、 停止传播（）；
}).on（'click'，'close'，close）；
$（文档）。打开（'单击'，关闭）；
});
上半场
好的，附加点击事件以隐藏/显示内容层，使用AJAX加载内容等等。。这应该是相当直截了当的。你已经有了什么代码？我只有HTML/CSS文件。我想知道是否存在这样的“拆分”页面（甚至剪切左边的图像）的方法。我只有左上角的页面，除非你将图像分为两部分，一部分在内容区域之前，一部分在内容区域之后。是的，我如何使灰色div脱离主包装？我必须把包裹切成两部分吗？