js轻松实现图片缩放

软件教程 2024-01-20

由于页面空间有限，图片常常先只显示缩约图，而用户往往要看清晰的大图，所以就必须把图片放大，以下是 Javascript实现的图片缩放实例，保存为html文件即可预览。

　　<html>
<head>
<title>图片大小缩放</title>
<style type="text/css">
.imgShow{width:680px; height:500px; overflow-x:scroll; overflow-y:scroll; margin- bottom:20px; overflow:hidden;}
</style>
</head>
<body onload="init()">
<h3>图片缩放</h3>
<div class="imgShow"><img alt="js轻松实现图片缩放" /></div>

　　　　　　var originalW = 0,originalH = 0,currentW = 0,currentH = 0;
var img = document.getElementById("img");

　　　　　　function init(){
currentW = img.width;
currentH = img.height;
originalW = currentW;
originalH = currentH;
}

　　　　　　function zoomOut(n){
img.width = currentW * n;
img.height = currentH * n;
UpdateCurrent();
}

　　　　　　function zoomIn(n){
img.width = currentW/n;
img.height = currentH/n;
UpdateCurrent();
}

　　　　　　function resetImg(){
img.width = originalW;
img.height = originalH;
UpdateCurrent();
}

　　　　　　function UpdateCurrent(){
currentW = img.width;
currentH = img.height;
}
</script>
</body>
</html>

标签： js图片缩放

上一篇：GridView中的CheckBox取不到值的原因及解决办法下一篇：偶然遇到js FireFox取不到img id

js轻松实现图片缩放

热门文章

最新文章

标签列表