响应式 Boostrap3 图像交换翻转答案

【问题标题】：Responsive Boostrap3 image swap rollover响应式 Boostrap3 图像交换翻转
【发布时间】：2013-10-16 22:18:40
【问题描述】：

我正在尝试使用 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>

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

谢谢！

【问题讨论】：

您唯一缺少的是图像上的position:absolute，现在看来您已修复...
是的...但现在我无法使用边距使图像居中：o auto :(
居中包含两个图像的“img-swap2”div
Twitter 的 Bootstrap 3 放弃了对 iE7 的支持，另请参阅：stackoverflow.com/questions/17974998/…，会有类似 github.com/coliff/bootstrap-ie7
该死！！...我不知道...在这一点上，我想我也会放弃让它与 IE7 兼容，幸运的是 IE7 的市场份额只有 > 1%所有 IE 家族

标签： jquery html css animation twitter-bootstrap-3

【解决方案1】：

尝试使用 Bootstrap 的偏移类：

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

或使用 margin: 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 网格中。

【讨论】：