鼠标悬停上的PHP jquery图像效果 - PHP jquery image effect on mouseover

PHP jquery image effect on mouseover

本文关键字：图像 jquery PHP 悬停鼠标 | 更新日期: 2023-09-27

当我把鼠标放在图像上时，我想把我的原始图像变成肖像。有人能告诉我怎么做吗？我想打开鼠标上的整个图像与肖像效果。

您应该使用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此处

您应该将jQuery与方法mouseover（）和mouseout（）一起使用，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'});
});

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

用鼠标悬停在图像上时，您可以打开一个带有z索引的DIV，然后放置图像并进行一些css样式设置以产生人像效果。您也可以根据图像大小设置弹出DIV大小。检查css属性。我想这会对你有所帮助。

使用css3 非常直接

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

看看css转换http://www.w3schools.com/css/css3_2dtransforms.asp

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