JavaScript动态放大、缩

发布时间：2018-09-10 04:32:09 所属栏目：Asp教程来源：站长网

导读：Java Script动态放大图片，缩小图片，重置图片大小，为了加快效果演示，这里远程调用了一张像素比较小的图片，实际运用中你可根据需要选用。演示代码： htmlheadtitle缩放图片尺寸/titlescript language=JavaScriptvar zoomLevel = 0;var currentWidth =

　　JavaScript动态放大图片，缩小图片，重置图片大小，为了加快效果演示，这里远程调用了一张像素比较小的图片，实际运用中你可根据需要选用。

　　演示代码：

<html> <head> <title>缩放图片尺寸</title> <script language="JavaScript"> 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*2; document.myImage.height = currentHeight*2; zoomLevel = zoomLevel + 1; update(); } function zoomOut(){ document.myImage.width = currentWidth/2; document.myImage.height = currentHeight/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; } </script> </head> <body onload="initial()"> <h2>缩放图片尺寸</h2> <hr> <div align="left" style="font:10pt;overflow-y:scroll; overflow-x:scroll;height=450;width=700"> <img name="myImage" src="http://www.veryhuo.com/uploads/common/images/p1.jpg"> </div> <hr> <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> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!