• 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>

  • 相关阅读:
    [备忘]使用Outlook 2010,拖拽大于20M附件发生“附件大小超过了允许的范围”提示的解决方法
    关于Linq to SQL 的“异常详细信息: System.InvalidCastException: 指定的转换无效。”
    [备忘]ie6中href设为javascript:void(0)页面无法提交的解决方法
    [备忘]谷歌员工证实PR值不再更新 呼吁用户关注内容
    今天早上
    C++primer6.20
    Fuzzy KNN
    数值转换
    ArcMap分割图斑
    VS2008 集成openCV过程
  • 原文地址:https://www.cnblogs.com/dreign/p/411884.html
Copyright © 2020-2023  润新知