本文介绍了一种使用JavaScript实现的图片自适应方法，并提供了一个查看图片原始尺寸的功能。通过限制图片宽度并添加提示按钮，实现了良好的视觉效果及用户体验。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.goNote { background-color:#738B3F;width:128;
border:1px;font-size:12px;padding:5px;color:white;cursor:pointer; }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function autoResize(o)
{
if (o.width>128)
{
o.width = 128;
if (o.parentNode.parentNode.childNodes.length == 1)
{
var note = document.createElement("div");
note.innerHTML = "<span class=/"goNote/" onclick=/"getSrcPic(this)/">查看原始图片</span>";
o.parentNode.parentNode.appendChild(note);
}
else
{
try
{
o.parentNode.parentNode.childNodes(1).style.display = "block";
}
catch (e) { }
}
}
}
function getSrcPic(o)
{
var t = o.parentNode.previousSibling.firstChild;
if (t.tagName.toLowerCase() == "img")
{
t.removeAttribute("width");
t.removeAttribute("height");
o.parentNode.style.display = "none";
//try { o.parentNode.removeNode(true) } catch (e) { o.parentNode.style.display = "none"; }
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE cellpadding="0" cellspacing="0" border="0">
<TR>
<TD><a href="javascript:void(0)"><img id="myimg" src="http://img.pconline.com.cn/images/photoblog/4784529/20073/23/1174579895696_mthumb.jpg" onLoad='autoResize(this);' onmouseout="autoResize(this)" border="0" /></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.goNote { background-color:#738B3F;width:128;
border:1px;font-size:12px;padding:5px;color:white;cursor:pointer; }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function autoResize(o)
{
if (o.width>128)
{
o.width = 128;
if (o.parentNode.parentNode.childNodes.length == 1)
{
var note = document.createElement("div");
note.innerHTML = "<span class=/"goNote/" onclick=/"getSrcPic(this)/">查看原始图片</span>";
o.parentNode.parentNode.appendChild(note);
}
else
{
try
{
o.parentNode.parentNode.childNodes(1).style.display = "block";
}
catch (e) { }
}
}
}
function getSrcPic(o)
{
var t = o.parentNode.previousSibling.firstChild;
if (t.tagName.toLowerCase() == "img")
{
t.removeAttribute("width");
t.removeAttribute("height");
o.parentNode.style.display = "none";
//try { o.parentNode.removeNode(true) } catch (e) { o.parentNode.style.display = "none"; }
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE cellpadding="0" cellspacing="0" border="0">
<TR>
<TD><a href="javascript:void(0)"><img id="myimg" src="http://img.pconline.com.cn/images/photoblog/4784529/20073/23/1174579895696_mthumb.jpg" onLoad='autoResize(this);' onmouseout="autoResize(this)" border="0" /></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
