jquery - 鼠标悬停时左右展开图像

Question

我正在尝试在鼠标悬停时左右为图像设置动画，并且在鼠标悬停时它将恢复到以前的状态。

例如，如果图像的原始宽度为 120 像素，则在页面加载时它将显示 100 像素，鼠标悬停时它将向左和向右扩展。因此，它会向左多出 10 像素，向右多出 10 像素。

<img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" />

演示 http://jsfiddle.net/squidraj/9FtBY/5/

但现在它只在右侧扩展。请任何建议都会很棒。

刚刚发现css3中有一个叫clip的东西？

Answer 1

好吧，基本上你的代码是正确的。动画看起来会向右扩展，因为图像是左对齐的。

如果你将它包裹在一个 div 中并让它居中对齐，它看起来会“很好”。

<div class="wrapper"><img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" /></div>

http://jsfiddle.net/GVdmF/

---

引号中的“好”，因为图像被拉伸。您最好使用使用背景图像的解决方案。如果你稍等片刻，我可能会看到我能做什么。

---

编辑：我们又来了：http: //jsfiddle.net/GVdmF/2/

• 我将您的图片分成 3 个部分：left.png、center.png 和 right.png。
• 我将 center.png 添加到 div
• 我添加了伪类 :before 和 :after，使它们成为块元素并添加了高度/宽度以及相应的背景图像 left.png 和 right.png

您的 JS 几乎保持不变。希望这有帮助。

Answer 2

我会结合使用相对于父容器的绝对定位max-width并将max-height它们重置为none悬停：

.img:hover img {
    position: absolute;
    max-width: none;
    max-height: none;
    left: -25%;
    top: -25%;
}

http://jsfiddle.net/xv9dh/

UPD。没有看到你的演示，所以我的回答可能不相关。

Answer 3

它可以通过纯 CSS 以两种方式完成（至少！）：

http://jsfiddle.net/9FtBY/10/

#expandimg {
    height: 100px;
    width: 100px;
    margin-left: 10px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
}

#expandimg:hover {
    width: 120px;
    margin-left: 0px;    
}

或第二个，与position: absolute;

http://jsfiddle.net/9FtBY/7/

#expandimg {
    height: 100px;
    width: 100px;
    left: 10px;
    position: absolute;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
}

#expandimg:hover {
    width: 120px;
    left: 0px;    
}

Answer 4

它是一个简单的animation概念，

如果您要animate通过增加元素来获取元素width，并且您需要将其显示为拉伸效果。就用这个，

Left = Left - (incrementedWidth/2)

要还原它，

Left = Left + (incrementedWidth/2)

代码：

$(document).ready(function () {
    $("#expandimg").mouseover(function () {
        $(this).stop().animate({
            //Decrement Left in pixel = 20/2 [20 increment in width]
            left: "-=10", 
            width: '120px'
        }, "fast"); 
    });
    $("#expandimg").mouseout(function () {
        $(this).stop().animate({
            //Increment Left in pixel = 20/2 [20 decrement in width]
            width: '100px',
            left: "+=10"
        }, "fast"); 
    });
});

[注意：如果您使用的是 property left，那么您必须设置一个类似absolute, 的位置才能访问它。]

演示