Question

所以这是一个棘手的问题。我有一个显示/隐藏点击的div，其中div是隐藏的div，有幻灯片显示，一切正常，等等，除了图像粘贴到父元素的宽度而不是全宽容器。我怎样才能使它忽略我假设发生的父元素并使其适合容器的宽度。我尝试了背景元素和不同的元素但却无法正常工作。相关代码如下。

var move = -15;

var zoom = 1.2;

$('.item').hover(function () {

    width = $('.item').width() * zoom;
    height = $('.item').height() * zoom;

    $(this).find('img').stop(false, true).animate({
        'width': width,
        'height': height,
        'top': move,
        'left': move
    }, {
        duration: 200
    });

    $(this).find('div.caption').stop(false, true).fadeIn(200);
},

function () {

    $(this).find('img').stop(false, true).animate({
        'width': $('.item').width(),
        'height': $('.item').height(),
        'top': '0',
        'left': '0'
    }, {
        duration: 100
    });

    $(this).find('div.caption').stop(false, true).fadeOut(200);
});

});

#slider {
    height: 685px;
    width: 1024px;
}

    height: 685px;
    width: 1024px;
    margin: 0;
    position: relative;
}

.slider-container {
    height: 685px;
    width: 1024px;
    overflow: hidden;
}

.advent {
    float: left;
    display: block;
    height: 275px;
    width: 340px;
    background: #222;
}

.natural {
    background: url(images/natural.jpg);
    }
.toggleBtn {
    display: block;
    margin: auto;
}

.toggleBtn p {
    font: normal 3em Futura, sans-serif;
    color: #029b9d;
    cursor: pointer;
    line-height: 8;
    padding: 15px;
    text-align: center;
}

.toggleBtn span {
    font: normal 3em Futura, sans-serif;
    color: #222;
    line-height: 2.5;
    cursor: pointer;
    margin-bottom: 15px;
    float: right;
}

.toggleBtn span:hover {
    color: #029b9d;
}

.below {
    background: url(images/bg.jpg);
    width: 1024px;
    margin: auto;
    position: absolute;
    top: 8em;
    overflow: hidden;
    z-index: 9999;
}

.info {
    width: 100px;
    height: 100px;
    font: normal 2em Futura, sans-serif;
    background: url(images/info-btn.png)no-repeat;
    position: absolute;
    left: 3.5em;
    top: 2em;
    cursor: pointer;
}



<div class="item advent natural">
    <div class="caption toggleBtn"><div class="info"></div><p>Natural Jams</p></div>
    <div class="below">
                     <div id="slider">
              <img style="background:url(images/n1.jpg)"/>
            </div>  </div>  
    </div>

Answer 1

我已经改变了一点脚本。试试让我知道

<script>
    var move = -15;

        var zoom = 1.2;
$(document).ready(function(){
        $('.item').hover(function() {  
                $(this).width('340px');
                width = $(this).width() * zoom;
                height = $(this).height() * zoom;

                $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});


                $(this).find('div.caption').stop(false,true).fadeIn(200);
        },
        function() {
                $(this).width('1338px');
                $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});        


                $(this).find('div.caption').stop(false,true).fadeOut(200);
        });

});
</script>
<style>
#slider {
    height: 685px;
    width: 1024px;
    margin: 0;
}

.slider-container {
    height: 685px;
    width: 1024px;
    overflow: hidden;
}

.advent {
    float: left;
    display: block;
    height: 275px;
    width: 340px;
    background: #222;
}

.natural {

    }
.toggleBtn {
    display: block;
    margin: auto;
}

.toggleBtn p {
    font: normal 3em Futura, sans-serif;
    color: #029b9d;
    cursor: pointer;
    line-height: 8;
    padding: 15px;
    text-align: center;
}

.toggleBtn span {
    font: normal 3em Futura, sans-serif;
    color: #222;
    line-height: 2.5;
    cursor: pointer;
    margin-bottom: 15px;
    float: right;
}

.toggleBtn span:hover {
    color: #029b9d;
}

.below {
    clear:both;
    width: 100%;
    margin: auto;
    overflow: hidden;
    z-index: 9999;
}

.info {
    width: 100px;
    height: 100px;
    font: normal 2em Futura, sans-serif;
    background: #000;
    position: absolute;
    left: 3.5em;
    top: 2em;
    cursor: pointer;
}
</style>
</head>
<body style="width:1338px;">
    <div class="item advent natural">
        <div class="caption toggleBtn">
            <div class="info"></div><p>Natural Jams</p></div>   
            <div class="below">
                <div id="slider">
                    <img style="background:url(images/n1.jpg)"/>
                </div>  
            </div>       
        </div>       
    </div>
</body>

隐藏的幻灯片不会在隐藏容器内扩展整个宽度

1 个答案: