简单的图片放大缩小
以左上角为定点，放大缩小，该点位置不变。
?
方法一：
?
<script type="text/javascript"> //兼容IE和火狐 缩小放大、缩放 function ImageSuofang(args) { var oImg = document.getElementById("oImg"); if (args) { oImg.width = oImg.width * 1.1; oImg.height = oImg.height * 1.1; } else { oImg.width = oImg.width / 1.1; oImg.height = oImg.height / 1.1; } } </script> <form id="form1"> <div data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;"><img id="oImg" src="/img/c.jpg" alt="简略的图片放大缩小"/></div> <input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" /> <input id="btn2" type="button" value="缩小" onclick="ImageSuofang(false)" /> <!-- <input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);"> --> </form>?
?方法二：
?
CSS编码如下：
?
#biankuang{height:480px;width:320px;margin: 30px auto;}//加一个border可以看到定点为左上角。?
下面是实现图片缩小放大功能的JS代码：
?
var zoomLevel = 0;var currentWidth = 0;var currentHeight = 0;var originalWidth = 0;var originalHeight = 0;function initial(){ currentWidth = document.myImage.width; currentHeight = document.myImage.height; originalWidth = currentWidth; originalHeight = currentHeight; update();}function zoomIn(){ document.myImage.width = currentWidth*1.2; document.myImage.height = currentHeight*1.2; zoomLevel = zoomLevel + 1; update();}function zoomOut(){ document.myImage.width = currentWidth/1.2; document.myImage.height = currentHeight/1.2; zoomLevel = zoomLevel - 1; update();}function resetImage(){ document.myImage.width = originalWidth; document.myImage.height = originalHeight; zoomLevel = 0; update();}function update(){ currentWidth = document.myImage.width; currentHeight = document.myImage.height; zoomsize.innerText = zoomLevel; imgsize.innerText = currentWidth + "X" + currentHeight;}?html的body中的代码如下：
?
<body onload="initial()"><div id="biankuang" data-orient="center"><img name="myImage" src="/img/c.jpg" alt="简略的图片放大缩小"/> //引入本地图片</div><p><input type="button" value="放大图片" onclick="zoomIn()"><input type="button" value="缩小图片" onclick="zoomOut()"><input type="button" value="重置图片" onclick="resetImage()"><span id="zoomsize"></span> <span id="imgsize"></span></p></body>