<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>改变图片大小  方法1</title>

    <script>

        function showbigger(){

            var div=document.getElementById("div");

            div.style.width=500+"px";

            div.style.height=500+"px";

        }

        function showsmaller(){

            var div=document.getElementById("div");

            div.style.width=100+"px";

            div.style.height=100+"px";   //注意获取的ID时img的ID

        }

    </script>

</head>

<body>

    <button  onclick="showbigger()">放大</button>

    <button  onclick="showsmaller()">缩小</button>

    <div style="width: 100px;height: 100px"><img src='img/1.jpg' id="div" ></div>

</body>

</html>

方法2：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>图片放大缩小</title>

</head>

<body>

    <p align="center">

        <input type="button" value="放大" onclick="blowup()">

        <input type="button" value="缩小" onclick="reduce()">

    </p>

    <table width="300" border="0" align="center">

        <tr>

            <td>

                <div align="center">

                    <input name="img" type="image" id="img" src="1.jpg" align="middle" border="0">

                </div>

            </td>

        </tr>

    </table>

    <p>

        <script language="JavaScript">

            function blowup(){

                var height=img.height;

                var width=img.width;

                if((height<=height*2)||(width<=width*2)){  //可以无限放大

                    img.height=img.height+20;

                    img.width=img.width+20;

                }

            }

            function reduce(){

                if((img.height>100)||(img.width>100)){   //可以缩小到宽或者高等于100px时的大小

                    img.height=img.height-20;

                    img.width=img.width-20;

                }

            }

        </script>

    </p>

<div align="center"></div>

<p>&nbsp;</p>

</body>

</html>

JS---改变图片大小的更多相关文章

  1. js改变盒子大小(上下左右)分析

    js改变盒子大小 知识点 三个mouse事件:mousedown mousemove mouseup css的定位和cursor 思路 先解决单边问题识别范围,得到所选区域 event. 根据距离,判 ...

  2. C#改变图片大小

    今天一女同事要做一个改变图片大小的功能,然后我就手写了几行代码,以后可能用得上 byte[] buffer = new byte[1]; //Byte转为Image对象 MemoryStream ms ...

  3. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  4. ios 改变图片大小缩放方法

    http://www.cnblogs.com/zhangdadi/archive/2012/11/17/2774919.html http://bbs.csdn.net/topics/39089858 ...

  5. imagecopyresampled()改变图片大小后质量要比imagecopyresized()高。

    php程序中改变图片大小的函数大多数人都想到用imagecopyresized(),不过经过测试比较发现,使用imagecopyresampled()改变的图片质量更高. 下面我们来看看两者的比较结果 ...

  6. JavaScript--鼠标滚动改变图片大小

    鼠标滚动改变图片的大小: 原理:当鼠标滚动时改变了zoom的值: <!DOCTYPE HTML> <html> <head> <title>通过鼠标滚轮 ...

  7. UIImage扩展用代码直接改变图片大小

    以下内容属于转载 在iOS中,uiimage没有用于修改大小的属性,要在代码中改变uiimage图片的大小,需要扩展UIImage类,如下: 头文件: #import<UIKit/UIKit.h ...

  8. photoshop改变图片大小，不改变像素

    用画图修改了图片像素,360*440 但是图片30K,要求图片20K 打开photoshop,打开图片,点击文件--存储为web所用格式,调节品质大小到20K以下,保存即可

  9. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  10. JavaScript在智能手机上的应用-用手势来改变图片大小

    ---------------------------------- <script type="text/javascript">            //初始化函 ...

随机推荐

  1. 如何用excel urldecode解码把url编码转为汉字?

    统计分析可以反映出网站运营的情况,并根据实际作出相应的调整,是站长必需的基础技能.ytkah感觉最好用的是谷歌统计,里面有个搜索关键词及对应受访页面,这个功能对优化用处很大,但大家都知道访问不太顺畅. ...

  2. ABAP OO 开发语法整理

    [转自 http://blog.csdn.net/saphome/article/details/6956933] 在类中,只能用TYPE 附加关键字指定数据类型. •TYPES: 一般的类型定义方法 ...

  3. ALV 表头 ADD_TEXT

    [转自http://lz357502668.blog.163.com/blog/static/16496743201252891452493/] CALL METHOD valid_reference ...

  4. QT设置textEdit光标到末尾

    //移动光标到末尾 QTextCursor cursor = ui->receiveTextEdit->textCursor(); cursor.movePosition(QTextCur ...

  5. DNS 原理入门 (转)

    DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识. 本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一.D ...

  6. nodejs模块之http&&url

    我们使用nodejs中的http模块来进行网络操作 一.什么是HTTP协议: 超文本传输协议(HyperText Transfer Protocol)HTTP假定其下层协议提供可靠传输. 因此,任何能 ...

  7. [原创]java WEB学习笔记26：MVC案例完整实践(part 7)---修改的设计和实现

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. python 3 递归调用与二分法

    递归调用与二分法 1.递归调用 递归调用:在调用一个函数的过程中,直接或间接地调用了函数本身. 示例: def age(n): if n == 1: return 18 # 结束条件 return a ...

  9. php使用mysql数据库时中文不显示或显示异常解决方法

    如果出现标题所述问题,需从四个层面解决问题 1 项目文件是否为utf8编码 右键项目文件->properties->Resource->Text file encoding-> ...

  10. File Space——一个java structs2.0的小栗子（DIY）

    1 概述 File Space系统适用于团体,主要提供的是团队文件分享以及个人文件的存储管理服务.分为个人文件存储管理平台和团队文件共享平台. 个人文件存储平台主要为个人提供相关的文件分类存储服务:该 ...