javascript悬停图像并显示左上角到右下角

问题描述：

当光标悬停在图像上时，我有一张40Px 40Px的图片，图像应该是100px 100px，但是打开缓慢的左上角至右下角或右上角左下角。当我将光标移动到图像时，准确地返回到原来的位置40px 40px。在此先感谢javascript悬停图像并显示左上角到右下角

请阅读如何正确后问题FAQ。当你撰写你的问题时，你会在屏幕上找到它。 – 2015-02-10 13:44:06

答

你也可以做到这一点，而不使用CSS3而不是JavaScript。

.image-placeholder { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
    transition: height 2s, width 2s; 
 
} 
 
.image-placeholder:hover { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.images { 
 
    list-style: none; 
 
    padding: 0px; 
 
} 
 
.images li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="image-placeholder"> 
 
    <!-- You could also use the class on image tags --> 
 
</div> 
 

 
<!-- second example --> 
 
<ul class="images"> 
 
    <li class="image-placeholder"></li> 
 
    <li class="image-placeholder"></li> 
 
    <li class="image-placeholder"></li> 
 
</ul>

好的，我明白了，但是你怎样才能使用javascript或jquery左下角左上角。当我举例如下类：$（“。amazon”）。hover（function（）{{“amazon a img” ）.toggleClass（ “amazon_hover”）; CSS：.amazon_hover { 位置：绝对; 宽度：100像素; 高度：100像素; -moz过渡：高度2S，宽度2S; z索引：10; } – Marko 2015-02-10 14:48:02

@Marko我不明白你为什么要用JQuery来做这件事，我用'vertical-align：middle'添加了第二个例子，你可以使用CSS来添加你自己的变体 – Berendschot 2015-02-10 15:08:41

我知道无论是css还是css javascript jquery对我来说很重要，我们可以慢慢地打开图像缓慢的顶部左边t右下。在此先感谢 – Marko 2015-02-10 16:45:29

答

您可以使用CSS转换：

img { 
    width: 40px; 
    height: 40px; 
    transition: all 2s; 
} 
img:hover { 
    width: 100px; 
    height: 100px; 
}

而且ofcourse一个JSFiddle Demo

javascript悬停图像并显示左上角到右下角

相关推荐