zoukankan      html  css  js  c++  java
  • JS ipad图片拖动缩放 PHP

    使用JS处理触摸事件,实现图片的拖动缩放。

    将网页添加到主屏时,设置图标

    <link rel="apple-touch-icon-precomposed" href="images/icon.png">

    禁止IPAD自己的页面缩放功能

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

    禁止页面的整体拖动

    document.body.addEventListener('touchmove', function (e)
    {
            e.preventDefault();
    }, false);

    添加触摸事件

    document.addEventListener('touchstart', img_mousedown, false);
    document.addEventListener('touchend', img_mouseup, false);
    document.addEventListener('touchmove', img_mousemove, false);

    获取手指位置

    在event中包含三个关于手指信息的数组:targetTouches changedTouches touches

    touches :当前位于屏幕上的所有手指的一个列表。
    targetTouches :位于当前DOM元素上的手指的一个列表。
    changedTouches :涉及当前事务的手指的一个列表。

    当处理touchend时,当两个手指操作时,在抬起1个手指或2个手指同时抬起时都会触发。
    当1个手指抬起时,changedTouches里存着抬起的手指信息,touches里存着未抬起的手指信息。
    当2个手指同时抬起时,changedTouches里存着两个抬起的手指信息。而touches未空。

    横竖屏切换时

    var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
    // 平板横竖切换时触发。
    window.addEventListener(orientationEvent, function ()
    {
         alert('横竖切换');
    });

    下载实例:https://files.cnblogs.com/zjfree/test_ipad.rar

  • 相关阅读:
    poj 2674 Linear world
    poj 3185 The Water Bowls
    The Largest Clique (uva11324)
    Proving Equivalences (LA 4287)
    强联通分量( HihoCoder 1185 )
    求点双联通分量(HihoCoder
    求桥,割点(HihoCoder
    欧拉回路
    uva10054
    表达式树(公共表达式消除 uva 12219)
  • 原文地址:https://www.cnblogs.com/zjfree/p/2957093.html
Copyright © 2011-2022 走看看