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="width: 24px; vertical-align: middle; text-align: center;" type="text" value="1" onclick="return Text1_onclick()" />/<input id="Text4" style="width: 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="width: 80px" type="text" value="0" readonly="" />像素，高：<input
        id="Text3" style="width: 80px" type="text" value="0" readonly="" />像素
</body>
</html>

posted @   轮回  阅读(3533)  评论(6)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae