<HTML>
<HEAD>
<TITLE>x-bai.com 小白的工具箱 图片浏览</TITLE>
<script>
var orig_height = 600;//大图
var orig_width = 800;//大图
var newWidth = 60;//小图
var newHeight = 80;//小图
function PicLoad()
{
// first do the big image
if (!document.photo_single) // in case a resize happens before the photo element exists
return;
// pick the smaller ratio
var ratio = 1;
var alt = "点击看原图 ";
ratio = newWidth / orig_width;
if (newHeight / orig_height < ratio)
ratio = newHeight / orig_height;
document.getElementById("mainPhoto").title=alt;
document.photo_single.width = orig_width * ratio;
document.photo_single.height= orig_height * ratio;
}
function OnPhotoClick()
{
document.getElementById("resizeCheck").checked = !document.getElementById("resizeCheck").checked;
ToggleResizeCheck();
}
function SetPhotoSize()
{
// first do the big image
if (!document.photo_single) // in case a resize happens before the photo element exists
return;
// pick the smaller ratio
var ratio = 1;
var alt = "点击看原图 ";
if (document.getElementById("resizeCheck").checked)
{ alt = "点击看原图 ";
ratio = newWidth / orig_width;
if (newHeight / orig_height < ratio)
ratio = newHeight / orig_height;
}else
{
alt = "自动适应大小";
}
document.getElementById("mainPhoto").title=alt;
document.photo_single.width = orig_width * ratio;
document.photo_single.height= orig_height * ratio;
}
function ToggleResizeCheck()
{
var checked = "false";
if (document.getElementById("resizeCheck").checked)
{
checked = "true";
}
// update the image
SetPhotoSize();
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onmouseup="document.selection.empty()" oncontextmenu="return false" onmousemove="document.selection.empty()">
< a href="#"><IMG alt="点击看原图" border="0" id="mainPhoto" onload= "orig_height=this.height;orig_width=this.width;PicLoad();return false;" SRC="aa.jpg" onerror="loadagin();return false;" name="photo_single" onclick="OnPhotoClick();"></a>
<script>
function loadagin()
{ this.location.href='';
return false;
}
</script>
【<input type="checkbox" id="resizeCheck" onclick="ToggleResizeCheck();" checked>自适应大小】
【<a href="javascript:window.close();" class="three">关闭窗口</a>】
</BODY>
</HTML>
JavaScript实现图片放大缩小的效果
No TrackBacks
TrackBack URL: http://www.wujianrong.com/mt-tb.cgi/2984
Leave a comment