Question

如何创建一个并排包含2个图像的部分，当将图像悬停在其上时，会将其中一个图像扩展为全宽。即当我将鼠标悬停在左侧图像上时，图像将向右展开以显示完整图像并覆盖右侧图像。然后，当我将鼠标悬停在右侧图像上时，该图像将向左扩展并覆盖左侧图像。

示例：

http://www.adhamdannaway.com/

http://www.car-vanstore.cz/

对此有任何帮助将不胜感激，我一直在寻找合适的jQuery插件和CSS tuts，但到目前为止还没有成功。

提前致谢！

Answer 1

诀窍是要了解如何让两个图像重叠。我附上了我的解决方案的工作副本。

我使用的方法依赖于绝对定位。这允许元素相互重叠。完成此操作后，我只需调整容器大小并将溢出设置为隐藏。

var mouseX;

$("#live-zone").mousemove( function(e) {
   mouseX = e.pageX; 
   mouseX = mouseX+"px";
   $("#x-pos").html("").append(mouseX);
   $("#div-one").css("width",mouseX); 
});

img{
    height:525px;/*Only here to ensure that my images are the same height*/
}
#img-one{
    z-index:9999;
}
#div-one{
    width:200px;
    height: 525px;
    overflow:hidden;
    position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
    <div id="live-zone">
        <div id="div-one">
            <img id="img-one" src="http://www.asia.ru/images/img/205795/YM-009.jpg">
        </div>
        <div id="div-two">
            <img id="img-two" src="http://www.canadabillard.com/images/thumbs/0000781_600.jpg">
        </div>
    </div>
    <div id="x-pos">
        200px
    </div>
            
</body>

Answer 2

只能使用CSS完成： HTML

<div>
<img src="foo.jpg" class="hover" style="left:1px;background:blue;"/>
<img src="bar.jpg" class="hover" style="right:1px;background:red"/>
</div>

CSS：

<style>
img.hover{
    position: fixed;
    width: 49%;
    height:40px;
    z-index: 1;
    -webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
   -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
     -o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
        transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
        }

img.hover:hover{
    width: 99%;
    z-index: 100;
}
</style>

如何在鼠标悬停的两个图像之间滑动？

2 个答案: