html中实现图像浏览(javascript)

想看到这个例子,你需要有39-1.jpg,39-2.jpg的图片,然后复制一下代码到记事本中,然后另存为html格式就可以了

code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" / >
<title >图像浏览</title>
<script language="javascript" type="text/javascript" style="border-right: white 5px dotted; border-top: white 5px dotted; border-left: white 5px dotted; border-bottom: white 5px dotted;">
<!--
function load()
{
window.Text2.value = document.images[0].width;
window.Text3.value = document.images[0].height;
document.images[0].width = document.body.clientWidth-35;
}

function resize()
{
document.images[0].width = document.body.clientWidth-35;
}

function Submit1_onclick() {
document.images[0].width = document.images[0].width * 1.1;
}

function Submit2_onclick() {
 document.images[0].width = document.images[0].width * 0.9;
}

function Submit3_onclick() {
document.images[0].width = document.body.clientWidth-35;
}

function Submit4_onclick() {
document.images[0].width = window.Text2.value;
}

function Button1_onclick() {
window.Text1.value ="1";
document.images[0].src = "39-1.jpg";
}

function Button4_onclick() {
window.Text1.value ="2";
document.images[0].src = "39-2.jpg";
}

function Button2_onclick() {
var n = window.Text1.value ;
n--;
if(n<1)
n=1;
window.Text1.value =n;
if(n==1)
document.images[0].src = "39-1.jpg";
if(n==2)
document.images[0].src = "39-2.jpg";
}

function Button3_onclick() {
var n = window.Text1.value ;
n++;
if(n>2)
n=2;
window.Text1.value =n;
if(n==1)
document.images[0].src = "39-1.jpg";
if(n==2)
document.images[0].src = "39-2.jpg";

}

// -->
</script>
</head>

<body bgcolor =DimGray onload = "return load()" onresize ="return resize()">

<label >
<input name="Submit" type="submit"  value=" 放大 " id="Submit1" onclick="return Submit1_onclick()" />
</label>
<label>
<input type="submit" name="Submit2" value=" 缩小 " id="Submit2" onclick="return Submit2_onclick()" />
</label>
<label>
<input type="submit" name="Submit3" value="窗口大小" id="Submit3" onclick="return Submit3_onclick()" />
    <input type="submit" name="Submit4" value="实际大小" id="Submit4" onclick="return Submit4_onclick()" />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <input id="Button1" type="button" value="|<" onclick="return Button1_onclick()" />
    <input id="Button2" type="button" value="<" onclick="return Button2_onclick()" />
    &nbsp;第<input id="Text1" style=" 24px; vertical-align: middle; text-align: center;" type="text" value="1" onclick="return Text1_onclick()" />/<input id="Text4" style=" 24px; vertical-align: middle; text-align: center;" type="text" value="2" onclick="return Text1_onclick()" readonly="" />页&nbsp;
    <input id="Button3" type="button" value=">" onclick="return Button3_onclick()" />
    <input id="Button4" type="button" value=">|" onclick="return Button4_onclick()" />
    &nbsp; &nbsp;
</label>
<hr />
    <br />
<img id="IMG1" alt="39-1.jpg" src="39-1.jpg" enableviewstate=true ismap="" style="border-right: palegoldenrod thick ridge; border-top: palegoldenrod thick ridge; border-left: palegoldenrod thick ridge; border-bottom: palegoldenrod thick ridge" />&nbsp;<br />
<hr />       &nbsp;宽:<input id="Text2" style=" 80px" type="text" value="0" readonly="" />像素,高:<input
        id="Text3" style=" 80px" type="text" value="0" readonly="" />像素
</body>
</html>

原文地址:https://www.cnblogs.com/dreign/p/411884.html