Javascript PHP jquery图像对鼠标悬停的影响

当我把鼠标移到图像上时，我想把我的原始图像变成肖像。谁能告诉我怎么做？我想在鼠标上打开具有纵向效果的整个图像。

在图像上方的鼠标上，您可以打开带有一些z索引的

DIV

，然后放置图像并进行css样式设置以实现纵向效果。您也可以根据图像大小设置弹出DIV的大小。检查css属性。我认为这将对您有所帮助。

使用css3非常简单

img:hover {
 transform: rotate(90deg);
}

看看css转换

编辑：事实上，这可能不是你想要的。图像将转换回mouseout上的横向视图

您应该使用css

---

示例

您应该将jQuery与mouseover（）和mouseout（）方法一起使用，旋转属性不允许图片水平移动。 这是我的护照

CSS

HTML

---

或者在纯CSS中亲吻，而不使用jQuery中的animate方法

您是否有可用的肖像图像，或者是否要使用CSS？我想从原始图像创建肖像。我没有肖像图片。你说的“原始”图片是什么意思？你能给出一个例子或网址吗？

.main:hover img {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#main {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
#img {
    width:300px;
    height:200px;
}

<div id="main">
    <img id="img" src="http://s13.postimg.org/m3yqyd7zb/windows_xp_bliss_wide.jpg" />
</div>

$('#main').mouseover(function() {
    $(this).animate({width : '200px'});
});
$('#main').mouseout(function() {
    $(this).animate({width : '300px'});
});