——————————————————————————————————

<script type="text/javascript">
            //初始化函数，绑定触屏事件
            function init() {
                var div = document.getElementById("div");
                div.ongesturechange = function(e){
                    //scale代表手势的缩放比例，小于1是缩小，大于1是放大，原始为1
                    var scale = e.scale;
                    //获取图片的dom
                    var img = document.getElementsByTagName('img')[0];
                    var w = img.width;    //图片的当前的宽度
                    var h = img.height;    //图片的当前的高度
                    if(scale > 1){        //如果是放大
                        w += 10;        //宽度加大10
                        h += 10;        //高度加大10
                    }else if(scale < 1){//如果是缩小
                        w -= 10;        //宽度减小10
                        h -= 10;        //高度减小10
                    }
                    img.width = w;        //新的宽度
                    img.height = h;        //新的高度
                };
            }
        </script>

——————————————————————————————————

<style>
            div{
                border:2px solid red;
                color:red;
                margin: 10px auto;
                padding: 20px;
                text-align: center;
            }
</style>

————————————————————————————————————

<body onload="init();">
        <div id="div">
            <img src="1.jpg" width="500" height="500"/>
        </div>
</body>

——————————————————————————————————————

JavaScript在智能手机上的应用-用手势来改变图片大小的更多相关文章

  1. JavaScript在智能手机上的应用-通过滑动修改网页字体大小

    ---------------------------------- <script type="text/javascript">            //变量x, ...

  2. JavaScript在智能手机上的应用-判断是否为移动浏览器

    -------------------- <script type="text/javascript">            var userAgent = navi ...

  3. JavaScript在智能手机上的应用-测试是否支持滑动事件

    ---------------------------- <script type="text/javascript">                        ...

  4. JavaScript在智能手机上的应用-使用手机GPS定位用户所在城市

    ---------------------------- <script type="text/javascript" language="javascript&q ...

  5. 图片上传（3）（组件 -- 图片大小宽高限制）base64图片宽高读取

    1.上传组件(可上传多个文件) <template> <div class="attachmentN"> <span class="btnS ...

  6. JavaScript如何实现上拉加载，下拉刷新？

    转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...

  7. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  8. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  9. Android智能手机上的音频浅析

    手机可以说是现在人日常生活中最离不开的电子设备了.它自诞生以来,从模拟的发展到数字的,从1G发展到目前的4G以及不久将来的5G,从最初的只有唯一的功能(打电话)发展到目前的全功能,从功能机(featu ...

随机推荐

  1. linux下卸载和安装mysql数据库的方法

    1.1  MySQL下载 下载地址:http://www.mysql.com/downloads/mysql/5.5.html#downloads 版本:5.1.68 平台:linux general ...

  2. 对“针对接口编程，而不是针对实现编程”的理解

    今天在阅读<Head First设计模式>的时候,看到了这句话:"针对接口编程,而不是针对实现编程",第一次见到的时候,不太清楚作者想表达的意思,想着到后来看看实例就懂 ...

  3. 为Textview里面的ImageSpan添加点击响应事件

    对于图文混排的TextView,用户在浏览到里面的图片的时候,往往有点击图片preview大图或者preview之后保存图片的需求,这就需要为Textview里面的ImageSpan设置点击响应事件. ...

  4. css display属性介绍

    none此元素不会被显示. block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block行内块元素.(CSS2 ...

  5. LEK-Introduction

    LEK - logstash + elasticsearch + Kibana Elasticsearch, Logstash, and Kibana — designed to take data ...

  6. CocoaPods 报错 [!] The dependency `JSONModel (~> 1.2.0)` is not used in any concrete target.

    当用CocoaPods  pod install 时出现了下面的错误时: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; col ...

  7. 工艺成型及仿真、铸造工艺及仿真ProCAST软件入门认识介绍

    视频源:技术邻 关键词:ProCAST.工艺成型及仿真.铸造工艺及仿真 简介:ProCAST 软件是由美国 USE 公司开发的铸造过程的模拟软件采用基于有限元(FEM)的数值计算和综合求解的方法,对铸 ...

  8. CSU 1639 队长，我想进集训队！

    水题 #include<cstdio> int main() { int x1, x2, x3, u, h; int n; while (~scanf("%d", &a ...

  9. iOS开发设置关于tabBar和navigationBar以及item中的一些全局属性

    /* To set item label text attributes use the appearance selectors available on the superclass, UIBar ...

  10. 关于IOS的Cocoapods相关问题

    Cocoa Pods确实是一个方便的工具,特别是在敏捷开发多个项目的时候,一个工具重复使用,大量节约时间: 可以及时更新github上面的开源库代码,只要改动Podfile文件中对应的开源库的版本号即 ...