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

<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. Java swing 如何将一个按钮放置到弹出框框的任意位置？（Absolute layout 布局的使用）

    准备: Absolute layout 绝对布局,绝对布局中控件的可以在任意位置放置 如何制作下面那种样子的 弹出框? ---------------------------------------- ...

  2. 路由页面缓存开启 以及 keep-alive 给你埋下的坑

    为什么要用keep-alive呢, 因为这个会缓存dom模板, 下次再回到这个页面, 就可以利用这个已经渲染好的dom结构了, 如果数据不一样, 也会启用 virtualDoM 进行diff更新, 这 ...

  3. history对象 back() forward() go() 和pushState() replaceState()

    History(Window.history对象)对象保存着用户上网的历史记录.处于安全方面的考虑,开发人员无法得知用户浏览过的URL,但是借由用户访问过的页面列表,同样可以在不知道实际URL的情况下 ...

  4. open（）的模块

    对文件操作流程: 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 mode can be: *  'r' 只读. * 'w' 写入,如果之前有就覆盖 * 'a' ...

  5. prototype原型解析

    每个对象都有原型, prototype能够实现实例共享,节约使您有能力向对象添加属性和方法. 如 <script type="text/javascript"> fun ...

  6. linux下安装nginx+php

    参考:http://blog.csdn.net/ihelloworld/article/details/7029796 http://blog.chinaunix.net/uid-21374062-i ...

  7. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

  8. BOS物流管理系统-第八天

    BOS物流管理系统-第八天-权限系统设计-Shiro 回顾: 两大块业务:基础设置模块,业务派单模块. 两天:权限控制. 拦截器大的范围的.纯登录级别(认证级别)大颗粒的权限控制的一种技术. Shir ...

  9. android 一些数据转换方法

    android 一些数据转换方法 package com.ai9475.util; import android.content.Context; import android.content.res ...

  10. jQuery切换网页皮肤并保存到Cookie示例代码

    经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...