放大和縮小動態圖像
[英]Zoom In and Zoom Out for dynamic Image
問題描述
這是我的放大和縮小代碼：
function ZoomIn() {
var ZoomInValue = parseInt(document.getElementById("stuff").style.zoom) + 1 + '%'
document.getElementById("stuff").style.zoom = ZoomInValue;
return false;
}
function ZoomOut() {
var ZoomOutValue = parseInt(document.getElementById("stuff").style.zoom) - 1 + '%'
document.getElementById("stuff").style.zoom = ZoomOutValue;
return false;
}
這不能正常工作我希望它放大和縮小它會使圖像變大，這不是令人愉悅的縮放。 任何人都可以幫助獲得正確的放大和縮小代碼，以便解決我的問題，或者是否有更好的替代方法？
的HTML：
echo'<input type="button" value="Zoom In" OnClick="return ZoomIn();" />';
echo'<input type="button" value="Zoom out" OnClick="return ZoomOut();" />';
3 個解決方案
解決方案1
0 2015-12-04 19:55:02
這是我過去用於在圖像上獲得縮放效果的代碼。如果您可以使用，請告訴我：
$('#container img').hover(
function(){
var $this = $(this);
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
}
);
});
解決方案2
0 2015-12-04 20:01:48
我認為這個鏈接是你正在尋找的..
var currentZoom = 1;
$('button').click(function() {
currentZoom += 0.1;
$('body').css({
zoom: currentZoom,
'-moz-transform': 'scale(' + currentZoom + ')'
});
});
解決方案3
0 2015-12-04 20:28:28
如果下面給出的示例代碼有幫助，請告訴我。
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
<img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" alt="Mountain View" style="height:600;width:800;"id="stuff">
<hr>
<button type="button" id="ZoomIn">Zoom-In</button>
<button type="button" id="ZoomOut">Zoom-Out</button>
</body>
<script>
var currentZoom = 1.0;
$(document).ready(function () {
//Resize on mouse over
$('#stuff').hover(
function() {
$(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
$(this).animate({ 'zoom': 1 }, 400);
});
//Zoom in on mouse click
$('#ZoomIn').click(
function () {
$('#stuff').animate({ 'zoom': currentZoom += .1 }, 'slow');
})
//Zoom out on mouse click
$('#ZoomOut').click(
function () {
$('#stuff').animate({ 'zoom': currentZoom -= .1 }, 'slow');
})
});
</script>
</html>
使用放大和縮小以及在圖像不同位置上的標記來映射圖像
[英]Map image with zoom in and zoom out as well as marker on different position of image
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.