我似乎很難找到一個插件,它會放大我的圖像,同時使圖像的其餘部分保持的大小。Jquery Zoom插件?
我需要它的原因是因爲我正在使用圖像映射並嘗試放大特定大陸上的圖像。一旦放大,我將替換放大後的圖像,並使用新的圖像和圖像地圖來顯示該大陸的特定。當發生這種情況時,我不希望世界其他地圖的尺寸發生變化。
有沒有人知道這是一個很好的插件?
我似乎很難找到一個插件,它會放大我的圖像,同時使圖像的其餘部分保持的大小。Jquery Zoom插件?
我需要它的原因是因爲我正在使用圖像映射並嘗試放大特定大陸上的圖像。一旦放大,我將替換放大後的圖像,並使用新的圖像和圖像地圖來顯示該大陸的特定。當發生這種情況時,我不希望世界其他地圖的尺寸發生變化。
有沒有人知道這是一個很好的插件?
我發現,似乎證明了接近一個教程什麼你想,就如何到達那裏的說明書一起:http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
下面是另一個:http://mlens.musings.it/
編輯: 基於賈斯汀的評論:
我這裏講的是一個實際的縮放動畫。不僅僅是將其替換爲我可以淡化動畫。
使用jQuery的animate()方法來實現這一點。
代碼:
$(function(){ $('#zoomimage').click(function(){ $(this).animate({height:'150%', width:'150%'}, 500); }); });
編輯:基於Justin的下一個評論:
嘿阿迪亞,唯一的問題是大小的影響。有沒有一種方法可以隨着它的增長而進行裁剪,使其保持相同的尺寸?
這可以通過操縱圖像的容器來隱藏圖像的其餘部分來增加圖像。像這樣:
<div style="width:275px; height:95px; overflow:hidden;">
<img src="https://www.google.com/images/srpr/logo3w.png" id="zoomimage" />
</div>
overflow:hidden;
確保圖像的其餘部分不顯示。
不尋找放大縮小功能:)更像是你將如何放大谷歌地球上的大陸,但用戶將無法控制。基本上,他點擊世界地圖上的一個大陸,它會放大,通過ajax替換圖像和圖像映射,但我可以做任何插件的onComplete。 –
好的。那麼,它看起來並不像你需要插件那樣。當用戶用#id點擊一個圖像區域時,你只需用你的圖像替換整個地圖div。插件通常提供更復雜的功能,而這可以通過jQuery輕鬆完成。 –
我在這裏討論的是一個實際的縮放動畫。不僅僅是將其替換爲我可以淡化動畫。 –
不知道,OP不想改變大小,但該插件改變大小:/ –
@adityamenon你是什麼意思的大小,在該插件的圖像大小保持不變(寬度和高度) – Arif
我正在尋找更多的東西如果你很快放大到谷歌地球上的大陸,它會是什麼樣子。 –
好吧,這是令人困惑的。根據定義,* zoom *就是*增加尺寸*。 –
@adityamenon有兩個術語 - *放大*和*縮小*,所以放大它只是改變細節的水平使用相同的視口和分辨率通過varing視場 –
@Justin,你想要放大的方式?通過鼠標滾動? –