调整CSS图像蒙版:悬停在旋转木马上

Adjust CSS image masks on :hover in a carousel

本文关键字：悬停 旋转木马 CSS 图像 调整      更新时间：2023-09-26

用图片更容易解释(见下文)。https://www.dropbox.com/s/2a19vv7pooop0r3/stack.jpg

我想通过显示4个图像来制作一个交互式旋转木马。每个图像在水平方向上占25%的空间，但在滚动时，会展开以显示图像的大部分。所有的图像都不应该以任何方式翻译，只需要调整它们的蒙版。

原因:我有一个3D模型的4个渲染(线框，实体，纹理，渲染)。我希望通过鼠标悬停在它们上方，可以看到它们的更多/更少。

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

实现了我认为你正在寻找使用flexx。我相信你可能需要稍微调整一下，但它可能是你想要的。

http://jsbin.com/wocolukiyido

编辑:http://jsbin.com/wocolukiyido/1/edit?css,输出

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');
}

EDIT http://jsfiddle.net/xus5zx6s/3/

抱歉让你久等了。case语句可以在逻辑上进行改进，但它是有效的。我在版本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;
}

}); '

这里有一个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%;   
}
相关文章：