jquery - 响应式 Bootstrap 3 图像交换翻转

Question

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

我卡住了，因为到目前为止我尝试的一切都在某些点上失败了(背景图像没有响应，IE 与 Canvas 不兼容，绝对位置需要固定的宽度/高度，等等)有人可以帮助我吗？到目前为止，这是我能够做到的……

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>

JQuery:

$(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 中它工作正常，但在行上悬停图像显示错误，现在我使用固定大小但在最终应用程序中我将有多个图像大小

谢谢!

Answer 1

尝试使用Bootstrap 的偏移类:

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

或者使用ma​​rgin: 0 auto;

// 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 网格中。