Question

当我将鼠标悬停在图像上时，我希望将原始图像设为纵向。谁能告诉我怎么做？我想在鼠标悬停时用纵向效果打开整个图像。

Answer 1

你应该使用css transform。

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

示例jsfiddle here

Answer 2

你应该使用方法mouseover（）和mouseout（）来使用jQuery，rotate属性不会让你的图片水平。这是我的JSfiddle。

http://jsfiddle.net/gLj8n9s6/

CSS

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

HTML

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

的jQuery

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

或者KISS在纯CSS中执行此操作而不使用jQuery中的animate方法

Answer 3

在鼠标悬停在图像上时，您可以打开带有一些z-index的DIV，然后放置图像并执行一些CSS样式以产生该纵向效果。您也可以根据图像大小设置弹出DIV大小。检查this以获取css属性。我想这会对你有帮助。

Answer 4

这很简单，使用css3

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

查看css transform http://www.w3schools.com/css/css3_2dtransforms.asp

编辑：实际上可能不是你想要的。图像将在mouseout上转换回横向

鼠标悬停的PHP jquery图像效果

4 个答案: