|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 請教：用 js 能等比例縮小圖片嗎？？
請教：用 js 能等比例縮小圖片嗎？？
也就是可以做縮略圖的那種，可以嗎？？ |
[html]
<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=350;width=600">
<img name="myImage" src="http://www.blueidea.com/img/common/logo.gif">
</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>
[/html] |
好東東
支持 |
[html]
<html>
<head>
<title>縮放圖片尺寸</title>
<script language="JavaScript">
var zoomLevel = 100;
function initial(){
update();
}
function zoomIn(){
zoomLevel = zoomLevel +10
update();
}
function zoomOut(){
if(zoomLevel>0.2)
zoomLevel = zoomLevel - 10;
update();
}
function resetImage(){
zoomLevel = 100;
update();
}
function update(){
document.myImage.style.zoom=zoomLevel+"%";
zoomsize.innerText = zoomLevel+"%";
}
</script>
</head>
<body onload="initial()">
<h2>縮放圖片尺寸</h2>
<hr>
<div align="left" style="font:10pt;overflow-y:scroll;
overflow-x:scroll;height=350;width=600">
<img name="myImage" src="http://www.blueidea.com/img/common/logo.gif">
</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>
[/html] |
左鍵放大1.2倍，右鍵縮小1.2倍
[html]
<img name="myImage" src="http://www.blueidea.com/img/common/logo.gif" onclick="myImage.style.zoom*=1.2" style="zoom:1" oncontextmenu="myImage.style.zoom/=1.2;return false">
[/html] |
謝謝啦，有沒有辦法把圖片 縮小 到相同的高度信寬度。
比如 Load 的時候把所有圖片都等比例放大縮小到 w=100 h=100，呢？？
偶對JS比較菜哦，請不要見笑咯 |
yexj00在上個帖子中說
爆強！！！！ ;) |
|
