0

所以这是一个棘手的问题。我有一个在点击时显示/隐藏的 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>
4

1 回答 1

0

我稍微改变了剧本。试着让我知道

<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>
于 2013-08-29T04:59:11.163 回答