Question

使用图像更容易解释（见下文）。 https://www.dropbox.com/s/2a19vv7pooop0r3/stack.jpg

我想通过显示4张图片来制作互动式旋转木马。每个图像水平占据25％的空间，但在翻转时，会展开以显示大部分图像。没有任何图像应该以任何方式进行翻译，只需调整其掩模即可。

原因：我有4个3D模型渲染（线框，实体，纹理，渲染）。我希望能够通过将它们悬停在它们之上来看到更多/更少。

编辑：视频完美地解释了它： https://www.dropbox.com/s/g3mq15mlf560q68/example.mov

Answer 1

使用flexbox实现了我认为您正在寻找的东西。我确定你可能需要调整一下，但它可能是你正在寻找的。

http://jsbin.com/wocolukiyido

<强>可调整的： http://jsbin.com/wocolukiyido/1/edit?css,output

<强> HTML：

  <div class='border'>
    <div class='grid'>
      <div class='img1'></div>
      <div class='img2'></div>
      <div class='img3'></div>
      <div class='img4'></div>
    </div>
  </div>

<强> CSS：

.border {
    border: 1px solid black;
    width: 960px;
}

.grid {
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.grid:hover > div {
    width: 5%;
}

.grid > div:hover {
    width: 90%;
}

.grid > div {
    height: 100px;
    width: 25%;
    background-repeat: no-repeat;
}

.img1 {
    background-image: url('http://fillmurray.com/960/100');
}

.img2 {
    background-image: url('http://fillmurray.com/960/101');
}

.img3 {
    background-image: url('http://fillmurray.com/960/102');
}

.img4 {
    background-image: url('http://fillmurray.com/960/103');
}

Answer 2

编辑http://jsfiddle.net/xus5zx6s/3/

抱歉这花了这么久。案例陈述可以在逻辑上得到改进，但它有效。我在计算版本2中的边框时遇到了轻微错误，因此请使用版本3。

编辑：http://jsfiddle.net/xus5zx6s/5/

我想强调这个代码可以用更加程序化的方式清理，但它可以按照你的意愿运行。

`$('#contain div').click(function(){
var id = $(this).data('id');
$('#contain div').removeClass('active');
$(this).addClass('active');
$("#contain div:not('.active')").animate({'width':'10%'}); 
$(this).animate({'width':'70%'});
switch(id){
    case 1:
        $('#img2 img').animate({'left':'-672px'});
        $('#img3 img').animate({'left':'-768px'});
        $('#img4 img').animate({'left':'-864px'});
        break;
    case 2:
        $('#img2 img').animate({'left':'-96px'});
        $('#img3 img').animate({'left':'-768px'});
        $('#img4 img').animate({'left':'-864px'});
        break;
    case 3:
        $('#img2 img').animate({'left':'-96px'});
        $('#img3 img').animate({'left':'-192px'});
        $('#img4 img').animate({'left':'-864px'});
        break;
    case 4:
        $('#img2 img').animate({'left':'-96px'});
        $('#img3 img').animate({'left':'-192px'});
        $('#img4 img').animate({'left':'-288px'});
        break;
}

}）;`

Answer 3

这是一个模拟你想要的html / css3方法。由于div之间的间距，百分比大小有所减少，但应该得到点。

http://jsfiddle.net/biz79/51625mom/

HTML

<div id='container'>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
<div><img src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/pink.png"></div>
</div>

CSS

* {
  padding: 0px;
  margin: 0px;
  transition: width 200ms ease-in-out;
  /* edit the time 200ms to change transition speed */
}

#container {
    width:960px;    
}

#container div {
    width:24%;
    height:200px;
    display:inline-block;
    overflow:hidden;
}

#container:hover div {
    width:10%;   
}

#container div:hover {
    width:68%;   
}

调整CSS图像蒙版：将鼠标悬停在轮播中

3 个答案: