隐藏的幻灯片没有在隐藏的容器中完全展开

hidden slideshow not expanding full width inside hidden container

本文关键字：隐藏 幻灯片      更新时间：2023-09-26

所以这是一个棘手的问题。我有一个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>

我对脚本做了一些更改。试着让我知道

<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>
相关文章：