javascript懸停圖像並顯示左上角到右下角

當光標懸停在圖像上時，我有一張40Px 40Px的圖片，圖像應該是100px 100px，但是打開緩慢的左上角至右下角或右上角左下角。當我將光標移動到圖像時，準確地返回到原來的位置40px 40px。在此先感謝javascript懸停圖像並顯示左上角到右下角

來源

2015-02-10 Marko

請閱讀如何正確後問題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>

來源

2015-02-10 13:49:44 Berendschot

好的，我明白了，但是你怎樣才能使用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

來源

2015-02-10 13:53:26 LinkinTED

javascript懸停圖像並顯示左上角到右下角

回答

相關問題