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

<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. centos7,yum安装的redis用systemctl无法启动

    因为之前使用显示命令启动redis的,要使redis在后台运行就需要改redis.conf中的daemonize 为yes. 这次在centos7上也顺手改了为yes,然后使用systemctl启动, ...

  2. tomcat识别不出maven web项目

    解决办法: 点中项目-->Properties-->project facets 勾选:Dynamic Web Module.java.javaScript Apply-->OK 解 ...

  3. Linux常用命令及重要目录文件分析总结

    1.用户切换和更改密码 sudo -i / sudo su --->切换到root用户 su user --->从root用户切换回普通用户(/home/user) sudo passwd ...

  4. MySQL备份参数详解

    mysqldump 是采用SQL级别的备份机制,它将数据表导成 SQL 脚本文件,在不同的 MySQL 版本之间升级时相对比较合适,这也是最常用的备份方法. 1. --compatible = nam ...

  5. 写了一下午的dijkstra。突然发现我写的根本不是dijkstra。。。。是没优化过的BFS.......

    写了一下午的dijkstra.突然发现我写的根本不是dijkstra....是没优化过的BFS.......

  6. js--事件对象的理解4

    阻止默认行为:1.实例-简易修改右键菜单<script>document.oncontextmenu=function (ev){ var oEvent=ev||event; var oU ...

  7. iOS开发下架在AppStore中销售的app

    1.登陆开发者账号 2.选择itunes connect 选择我的app 3.选择要下架的app 4.价格与销售范围 5.销售范围 6.点击存储 //如果想要重新在AppStore中进行销售只需要选择 ...

  8. 2016 C++及系统软件技术大会亮点

    2016 C++及系统软件技术大会将于201610月28日-29日在上海举办!此次2016 C++及系统软件技术大会秉承"全球专家. 连接智慧"的理念!大会特邀C++之父Bjarn ...

  9. 如何使用cygwin去编译cocos2dx项目中的C++文件

    将生成的cocos2dx的Android项目导入到eclipse 可以先测试一下如何编译C++项目: 1.打开cygwin,进入到Android项目对应的目录下面去: 2.编译脚本 在编译脚本之间,如 ...

  10. hdu_5890_Eighty seven(bitset优化DP)

    题目链接:hdu_5890_Eighty seven 题意: 50个数,10W个询问,每次问删掉第i,j,k个数后,是否存在一种选10个数和为87的方案,只需要输出 ’Yes’ 或者 ’No’ 题解: ...