如何在鼠标悬停时在两个图像之间滑动？ [关闭]答案

【问题标题】：How do I slide between two images on mouse over? [closed]如何在鼠标悬停时在两个图像之间滑动？ [关闭]
【发布时间】：2015-07-03 16:16:43
【问题描述】：

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

例子：

http://www.adhamdannaway.com/

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

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

提前致谢！

【问题讨论】：

标签： jquery image transition

【解决方案1】：

仅使用 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】：

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

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

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>

【讨论】：

一个类似的解决方案，使用拖动而不是悬停，可以在纯 css 中完成，我觉得很神奇：lea.verou.me/2014/07/image-comparison-slider-with-pure-css
@Andy +1 但应该` mouseX = e.pageX ; mouseX = mouseX+"px";` 是 2 个单独的变量？
我只是觉得更容易理解我在做什么。但是你的权利是不必要的@AlexanderSolonik