0

我正在尝试使用 Jquery 和 Bootstrap3 进行响应式翻转，但这里的问题是图像必须是响应式的，并且必须与 IE7+ 兼容，所以这就是我不使用 CSS3 背景的原因

我卡住了，因为到目前为止我尝试过的一切都在某些方面失败了（背景图像没有响应，IE 与画布不兼容，绝对位置需要固定的宽度/高度等）有人可以帮我吗？这是我到目前为止所做的...

HTML：

<div class="row">
    <div class="col-sm-8">
            <ul>
                <li>
                    <div class="img-swap2">
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
                    </div>
                </li>
                <li>
                    <div class="img-swap2">
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
                        <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
                    </div>
                </li>
            </ul>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="img-swap2">
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
        </div>
        <div class="img-swap2">
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/000/fff" alt="" />
            <img class="animado img-responsive" src="http://dummyimage.com/125x66/fff/000" alt="" />
        </div>
    </div>
</div>

查询：

$(document).ready(function(){

    $('.img-swap2').hover(
    function(){
        $(this).children("img:eq(0)").fadeTo('400','0');
        $(this).children("img:eq(1)").fadeTo('800','1');
    },
    function(){
        $(this).children("img:eq(0)").fadeTo('800','1');
        $(this).children("img:eq(1)").fadeTo('400','0');
    });
});

CSS

ul {
    list-style-type: none;
    margin-bottom: 0;
}
ul li {
    display: block;
    float: left;
    border-left: 1px solid #333;
    width: 14%;
    max-height: 63px;
}
.img-swap2 {
    position: relative;
    left: 0;
    top: 0;
}
.img-swap2 img + img {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

如您所见..在UL中它工作正常，但在行上悬停图像显示错误，现在我使用固定大小但在最终应用程序中我将有几个图像大小

谢谢！

4

1 回答 1

0

尝试使用Bootstrap 的偏移类：

class="col-sm-4 text-center"

或使用边距：0自动； 

// CSS
.centered {
   margin: 0 auto;
}


// HTML
<div class="container">
   <div class="centered text-center">
       centered content, wrapper for images (img-swap2)
   </div>
</div>

如果你添加它float: none;，.centered它也会留在 Bootstrap 网格中。

于 2014-03-28T17:07:53.857 回答