修正放大和缩小编码 [英] Fix a zoom in and out coding
本文介绍了修正放大和缩小编码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用以下代码：
< html>
< head>
< style>
#thediv {
margin：0 auto;
height：400px;
width：400px;
overflow：hidden;
}
img {
position：relative;
剩下：50％;
top：50％;
}
< / style>
< / head>
< body>
< input type =buttonvalue = - onclick =zoom（0.9）/>
< input type =buttonvalue =+onclick =zoom（1.1）/>
< div id =thediv>
< img id =picsrc =http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg/>
< / div>
< script> （bm）{
img = document.getElementById（pic）
wid = img.width
ht = img.height
img.style.width =（wid * zm）+px
img.style.height =（ht * zm ）+px
img.style.marginLeft = - （img.width / 2）+px;
img.style.marginTop = - （img.height / 2）+px;
}
< / script>
< / body>
< / html>
用于制作简单的放大和缩小功能。
我这个我有一个图像的难度是无限期地缩放。我想修复放大和缩小的位置。放大和缩小图片时，图片不得超过此位置。
我正在为此链接 在这里：
var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;
function zoom（zm）{
var img = document.getElementById（pic）;
if（zm> 1）{
if（zoomLevel< maxZoomLevel）{
zoomLevel ++;
} else {
return;
}
} else if（zm <1）{
if（zoomLevel> minZoomLevel）{
zoomLevel--;
} else {
return;
}
}
wid = img.width;
ht = img.height;
img.style.width =（wid * zm）+px;
img.style.height =（ht * zm）+px;
img.style.marginLeft = - （img.width / 2）+px;
img.style.marginTop = - （img.height / 2）+px;
}
您可以根据需要修改缩放级别。
我稍微修改了，因为您只需要将javascript添加到左下角区域。
I am using the following coding
<html>
<head>
<style>
#thediv {
margin:0 auto;
height:400px;
width:400px;
overflow:hidden;
}
img {
position: relative;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
<div id="thediv">
<img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
</div>
<script>
window.onload = function(){
zoom(1)
}
function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
</script>
</body>
</html>
For making a simple zoom in and zoom out function.
I this i have a difficulty of the image is zooming indefinitely. i want to fix a position to zoom in and zoom out. The image must not exceed that position while zooming in and zooming out.
I am adding a fiddle to this link
解决方案
var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;
function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
if(zoomLevel < maxZoomLevel){
zoomLevel++;
}else{
return;
}
}else if(zm < 1){
if(zoomLevel > minZoomLevel){
zoomLevel--;
}else{
return;
}
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
You can modify the zoom levels to whatever you want.
I modified the fiddle a bit, since you only need to add javascript to the bottom-left area.
这篇关于修正放大和缩小编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
