{"id":442,"date":"2017-02-18T16:36:24","date_gmt":"2017-02-18T08:36:24","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=442"},"modified":"2017-02-18T16:36:24","modified_gmt":"2017-02-18T08:36:24","slug":"html5%e7%a7%bb%e5%8a%a8%e7%ab%af%e8%a7%a6%e6%91%b8%e5%b1%8f%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad%e6%bb%91%e5%8a%a8","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=442","title":{"rendered":"HTML5\u79fb\u52a8\u7aef\u89e6\u6478\u5c4f\u56fe\u7247\u8f6e\u64ad\u6ed1\u52a8"},"content":{"rendered":"<p>JS_touch\u4ecb\u7ecd<br \/>\ntouchstart:\u5f53\u624b\u6307\u89e6\u6478\u5c4f\u5e55\u65f6\u89e6\u53d1\uff1b\u5373\u4f7f\u5df2\u7ecf\u6709\u4e00\u4e2a\u624b\u6307\u653e\u5728\u4e86\u5c4f\u5e55\u4e0a\u4e5f\u4f1a\u89e6\u53d1\u3002<br \/>\ntouchmove:\u5f53\u624b\u6307\u5728\u5c4f\u5e55\u4e0a\u6ed1\u52a8\u65f6\u8fde\u7eed\u7684\u89e6\u53d1\u3002\u5728\u8fd9\u4e2a\u4e8b\u4ef6\u53d1\u751f\u671f\u95f4\uff0c\u8c03\u7528preventDefault()\u53ef\u963b\u6b62\u6eda\u52a8\u3002<br \/>\ntouchend:\u5f53\u624b\u6307\u4ece\u5c4f\u5e55\u4e0a\u79fb\u5f00\u65f6\u89e6\u53d1\u3002<br \/>\ntouchcancel:\u5f53\u7cfb\u7edf\u505c\u6b62\u8ddf\u8e2a\u89e6\u6478\u65f6\u89e6\u53d1\u3002\u5173\u4e8e\u6b64\u4e8b\u4ef6\u7684\u786e\u5207\u89e6\u53d1\u4e8b\u4ef6\uff0c\u6587\u6863\u4e2d\u6ca1\u6709\u660e\u786e\u8bf4\u660e\u3002<\/p>\n<p>\u4ee5\u4e0a\u4e8b\u4ef6\u7684event\u5bf9\u8c61\u4e0a\u9762\u90fd\u5b58\u5728\u5982\u4e0b\u5c5e\u6027\uff1a<br \/>\ntouches:\u8868\u793a\u5f53\u524d\u8ddf\u8e2a\u7684\u89e6\u6478\u64cd\u4f5c\u7684Touch\u5bf9\u8c61\u7684\u6570\u7ec4\u3002<br \/>\ntargetTouches:\u7279\u5b9a\u4e8e\u4e8b\u4ef6\u76ee\u6807\u7684Touch\u5bf9\u8c61\u7684\u6570\u7ec4\u3002<br \/>\nchangeTouches:\u8868\u793a\u81ea\u4e0a\u6b21\u89e6\u6478\u4ee5\u6765\u53d1\u751f\u4e86\u4ec0\u4e48\u6539\u53d8\u7684Touch\u5bf9\u8c61\u7684\u6570\u7ec4\u3002<\/p>\n<p>\u6bcf\u4e2aTouch\u5bf9\u8c61\u5305\u542b\u4e0b\u5217\u5c5e\u6027\uff1a<br \/>\nclientX:\u89e6\u6478\u76ee\u6807\u5728\u89c6\u53e3\u4e2d\u7684X\u5750\u6807\u3002<br \/>\nclientY:\u89e6\u6478\u76ee\u6807\u5728\u89c6\u53e3\u4e2d\u7684Y\u5750\u6807\u3002<br \/>\nidentifier\uff1a\u8868\u793a\u89e6\u6478\u7684\u552f\u4e00ID\u3002<br \/>\npageX\uff1a\u89e6\u6478\u76ee\u6807\u5728\u9875\u9762\u4e2d\u7684x\u5750\u6807\u3002<br \/>\npageY\uff1a\u89e6\u6478\u76ee\u6807\u5728\u9875\u9762\u4e2d\u7684y\u5750\u6807\u3002<br \/>\nscreenX:\u89e6\u6478\u76ee\u6807\u5728\u5c4f\u5e55\u4e2d\u7684x\u5750\u6807\u3002<br \/>\nscreenY:\u89e6\u6478\u76ee\u6807\u5728\u5c4f\u5e55\u4e2d\u7684y\u5750\u6807\u3002<br \/>\ntarget:\u89e6\u6478\u7684DOM\u8282\u70b9\u5750\u6807<\/p>\n<p>\u963b\u6b62\u4e8b\u4ef6\u7684\u9ed8\u8ba4\u52a8\u4f5c<br \/>\nevent.preventDefault()<\/p>\n<p>\u672c\u6587\u8fd0\u7528\u5230\u4e86Zepto.js \u7684swipeLeft\uff08\u5de6\u6ed1\uff09\uff0cswipeRight\uff08\u53f3\u6ed1\uff09\u51fd\u6570<\/p>\n<pre class=\"brush:html;toolbar:false\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u56fe\u7247\u8f6e\u64ad&lt;\/title&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n    *{margin: 0;padding: 0;list-style: none;}\r\n        .pictrue{width: 100%;margin:0 auto;position:relative;height: 200px;background-color: white;overflow: hidden;margin-bottom: 5px;}\r\n        .images{height: 200px;}\r\n        .images li{height: 200px;float: left;}\r\n        .images li img{height: 200px;width: 100%;}\r\n        .index{height: 10px;margin-top: -30px;position: absolute;width: 100%;text-align: center}\r\n        .index ul{display: inline-block;}\r\n        .index li{width: 10px;height: 10px;border-radius:10px;background-color:#9a9a9a;float: left;margin-right: 8px;}\r\n        .index li.on{background-color: white;}\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;script src=\"http:\/\/www.zeptojs.cn\/zepto.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;div class=\"pictrue\"&gt;\r\n        &lt;ul class=\"images\"&gt;\r\n            &lt;li style=\"background-color: red;\"&gt;&lt;img alt=\"\" src=\"https:\/\/ss0.bdstatic.com\/5aV1bjqh_Q23odCf\/static\/superman\/img\/logo\/logo_white_fe6da1ec.png\"&gt;&lt;\/li&gt;\r\n            &lt;li style=\"background-color: gray;\"&gt;&lt;img alt=\"\" src=\"https:\/\/ss0.bdstatic.com\/5aV1bjqh_Q23odCf\/static\/superman\/img\/logo\/logo_white_fe6da1ec.png\"&gt;&lt;\/li&gt;\r\n            &lt;li style=\"background-color: green;\"&gt;&lt;img alt=\"\" src=\"https:\/\/ss0.bdstatic.com\/5aV1bjqh_Q23odCf\/static\/superman\/img\/logo\/logo_white_fe6da1ec.png\"&gt;&lt;\/li&gt;\r\n            &lt;li style=\"background-color: black;\"&gt;&lt;img alt=\"\" src=\"https:\/\/ss0.bdstatic.com\/5aV1bjqh_Q23odCf\/static\/superman\/img\/logo\/logo_white_fe6da1ec.png\"&gt;&lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n        &lt;div class=\"index\"&gt;\r\n            &lt;ul&gt;\r\n                &lt;li class=\"on\"&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\/\/zepto\u5bf9\u79fb\u52a8\u7aef\u6ed1\u52a8\u6269\u5c55\r\n;(function($){\r\n      var touch = {},\r\n        touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,\r\n        longTapDelay = 750,\r\n        gesture\r\n\r\n      function swipeDirection(x1, x2, y1, y2) {\r\n        return Math.abs(x1 - x2) &gt;=\r\n          Math.abs(y1 - y2) ? (x1 - x2 &gt; 0 ? 'Left' : 'Right') : (y1 - y2 &gt; 0 ? 'Up' : 'Down')\r\n      }\r\n\r\n      function longTap() {\r\n        longTapTimeout = null\r\n        if (touch.last) {\r\n          touch.el.trigger('longTap')\r\n          touch = {}\r\n        }\r\n      }\r\n\r\n      function cancelLongTap() {\r\n        if (longTapTimeout) clearTimeout(longTapTimeout)\r\n        longTapTimeout = null\r\n      }\r\n\r\n      function cancelAll() {\r\n        if (touchTimeout) clearTimeout(touchTimeout)\r\n        if (tapTimeout) clearTimeout(tapTimeout)\r\n        if (swipeTimeout) clearTimeout(swipeTimeout)\r\n        if (longTapTimeout) clearTimeout(longTapTimeout)\r\n        touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null\r\n        touch = {}\r\n      }\r\n\r\n      function isPrimaryTouch(event){\r\n        return (event.pointerType == 'touch' ||\r\n          event.pointerType == event.MSPOINTER_TYPE_TOUCH)\r\n          &amp;&amp; event.isPrimary\r\n      }\r\n\r\n      function isPointerEventType(e, type){\r\n        return (e.type == 'pointer'+type ||\r\n          e.type.toLowerCase() == 'mspointer'+type)\r\n      }\r\n\r\n      $(document).ready(function(){\r\n        var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType\r\n\r\n        if ('MSGesture' in window) {\r\n          gesture = new MSGesture()\r\n          gesture.target = document.body\r\n        }\r\n\r\n        $(document)\r\n          .bind('MSGestureEnd', function(e){\r\n            var swipeDirectionFromVelocity =\r\n              e.velocityX &gt; 1 ? 'Right' : e.velocityX &lt; -1 ? 'Left' : e.velocityY &gt; 1 ? 'Down' : e.velocityY &lt; -1 ? 'Up' : null\r\n            if (swipeDirectionFromVelocity) {\r\n              touch.el.trigger('swipe')\r\n              touch.el.trigger('swipe'+ swipeDirectionFromVelocity)\r\n            }\r\n          })\r\n          .on('touchstart MSPointerDown pointerdown', function(e){\r\n            if((_isPointerType = isPointerEventType(e, 'down')) &amp;&amp;\r\n              !isPrimaryTouch(e)) return\r\n            firstTouch = _isPointerType ? e : e.touches[0]\r\n            if (e.touches &amp;&amp; e.touches.length === 1 &amp;&amp; touch.x2) {\r\n              \/\/ Clear out touch movement data if we have it sticking around\r\n              \/\/ This can occur if touchcancel doesn't fire due to preventDefault, etc.\r\n              touch.x2 = undefined\r\n              touch.y2 = undefined\r\n            }\r\n            now = Date.now()\r\n            delta = now - (touch.last || now)\r\n            touch.el = $('tagName' in firstTouch.target ?\r\n              firstTouch.target : firstTouch.target.parentNode)\r\n            touchTimeout &amp;&amp; clearTimeout(touchTimeout)\r\n            touch.x1 = firstTouch.pageX\r\n            touch.y1 = firstTouch.pageY\r\n            if (delta &gt; 0 &amp;&amp; delta &lt;= 250) touch.isDoubleTap = true\r\n            touch.last = now\r\n            longTapTimeout = setTimeout(longTap, longTapDelay)\r\n            \/\/ adds the current touch contact for IE gesture recognition\r\n            if (gesture &amp;&amp; _isPointerType) gesture.addPointer(e.pointerId)\r\n          })\r\n          .on('touchmove MSPointerMove pointermove', function(e){\r\n            if((_isPointerType = isPointerEventType(e, 'move')) &amp;&amp;\r\n              !isPrimaryTouch(e)) return\r\n            firstTouch = _isPointerType ? e : e.touches[0]\r\n            cancelLongTap()\r\n            touch.x2 = firstTouch.pageX\r\n            touch.y2 = firstTouch.pageY\r\n\r\n            deltaX += Math.abs(touch.x1 - touch.x2)\r\n            deltaY += Math.abs(touch.y1 - touch.y2)\r\n          })\r\n          .on('touchend MSPointerUp pointerup', function(e){\r\n            if((_isPointerType = isPointerEventType(e, 'up')) &amp;&amp;\r\n              !isPrimaryTouch(e)) return\r\n            cancelLongTap()\r\n\r\n            \/\/ swipe\r\n            if ((touch.x2 &amp;&amp; Math.abs(touch.x1 - touch.x2) &gt; 30) ||\r\n                (touch.y2 &amp;&amp; Math.abs(touch.y1 - touch.y2) &gt; 30))\r\n\r\n              swipeTimeout = setTimeout(function() {\r\n                if (touch.el){\r\n                  touch.el.trigger('swipe')\r\n                  touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))\r\n                }\r\n                touch = {}\r\n              }, 0)\r\n\r\n            \/\/ normal tap\r\n            else if ('last' in touch)\r\n              \/\/ don't fire tap when delta position changed by more than 30 pixels,\r\n              \/\/ for instance when moving to a point and back to origin\r\n              if (deltaX &lt; 30 &amp;&amp; deltaY &lt; 30) {\r\n                \/\/ delay by one tick so we can cancel the 'tap' event if 'scroll' fires\r\n                \/\/ ('tap' fires before 'scroll')\r\n                tapTimeout = setTimeout(function() {\r\n\r\n                  \/\/ trigger universal 'tap' with the option to cancelTouch()\r\n                  \/\/ (cancelTouch cancels processing of single vs double taps for faster 'tap' response)\r\n                  var event = $.Event('tap')\r\n                  event.cancelTouch = cancelAll\r\n                  \/\/ [by paper] fix -&gt; \"TypeError: 'undefined' is not an object (evaluating 'touch.el.trigger'), when double tap\r\n                  if (touch.el) touch.el.trigger(event)\r\n\r\n                  \/\/ trigger double tap immediately\r\n                  if (touch.isDoubleTap) {\r\n                    if (touch.el) touch.el.trigger('doubleTap')\r\n                    touch = {}\r\n                  }\r\n\r\n                  \/\/ trigger single tap after 250ms of inactivity\r\n                  else {\r\n                    touchTimeout = setTimeout(function(){\r\n                      touchTimeout = null\r\n                      if (touch.el) touch.el.trigger('singleTap')\r\n                      touch = {}\r\n                    }, 250)\r\n                  }\r\n                }, 0)\r\n              } else {\r\n                touch = {}\r\n              }\r\n              deltaX = deltaY = 0\r\n\r\n          })\r\n          \/\/ when the browser window loses focus,\r\n          \/\/ for example when a modal dialog is shown,\r\n          \/\/ cancel all ongoing events\r\n          .on('touchcancel MSPointerCancel pointercancel', cancelAll)\r\n\r\n        \/\/ scrolling the window indicates intention of the user\r\n        \/\/ to scroll, not tap or swipe, so cancel all ongoing events\r\n        $(window).on('scroll', cancelAll)\r\n      })\r\n\r\n      ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',\r\n        'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){\r\n        $.fn[eventName] = function(callback){ return this.on(eventName, callback) }\r\n      })\r\n    })(Zepto)\r\n\r\n$(function(){\r\n    photoCarousel($(\".images\"),$(\".images li\"),$(\".index ul\"),-$(window).width(),$(window).width(),$(\".images li\").length,3000,1000);\r\n\r\n    \/\/\u56fe\u7247\u8f6e\u64ad\r\n    \/\/$ul \u5bb9\u5668,$li \u5143\u7d20,$index \u7d22\u5f15,left \u5f53\u524d\u504f\u79fb\u91cf,width \u4e00\u6b21\u6eda\u52a8\u5bbd\u5ea6,parentWidth \u5bb9\u5668\u5bbd\u5ea6,size \u56fe\u7247\u6570\u91cf,interval \u5faa\u73af\u6eda\u52a8\u95f4\u9694   0\u4e0d\u5faa\u73af\u64ad\u653e,scrolltime \u6eda\u52a8\u8fc7\u7a0b\u65f6\u95f4\r\n    function photoCarousel($ul,$li,$index,left,width,size,interval,scrolltime){\r\n        \/\/move 0:\u9ed8\u8ba4\u5de6\u6ed1\u53f3\u6ed1\uff1b1\uff1a\u505c\u6b62\u9ed8\u8ba4\u4e8b\u4ef6\uff0c\u56fe\u7247\u8ddf\u968f\u624b\u52bf\u79fb\u52a8\uff0ctime \u65f6\u95f4\u5927\u4e8e200\u6beb\u79d2\u56fe\u7247\u8ddf\u968f\u624b\u52bf\u79fb\u52a8  \u5426\u5219\u6267\u884c\u9ed8\u8ba4\u5de6\u6ed1 \u53f3\u6ed1\u4e8b\u4ef6\r\n        var inner,move=0,time=0,parentWidth=(size+2)*width;\r\n        $ul.width(parentWidth).css(\"transition-duration\",\"0s\").css(\"-webkit-transition-duration\",\"0s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n        $li.width(width).css(\"line-height\",$ul.height()+\"px\");\r\n        $li.first().before($li.last().clone());\r\n        $li.last().after($li.first().clone());\r\n        $li.find(\"img\").width(width);\r\n        index();\r\n        \/\/\u89e6\u5c4f  \r\n        \/\/\u89e6\u5c4f\u5f00\u59cb\r\n        $li.bind(\"touchstart\", function(event) {\r\n            if(interval!=0)\r\n                clearInterval(inner);\r\n            move = event.touches[0].pageX;\r\n            time = new Date().getTime();\r\n            \/\/\u4e8b\u4ef6\u505c\u6b62\r\n            event.preventDefault();\r\n        });\r\n\r\n        \/\/\u89e6\u5c4f\u7ed3\u675f\r\n        $li.bind(\"touchend\", function(event) {\r\n            if(interval!=0)\r\n                inner = auto();\r\n            if(move !=0){\r\n                $ul.css(\"transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"-webkit-transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n            }\r\n            time = new Date().getTime();\r\n            event.preventDefault();\r\n        }); \r\n\r\n        \/\/\u89e6\u5c4f\u79fb\u52a8\r\n        $li.bind(\"touchmove\", function(event) {\r\n            if(interval!=0)\r\n                clearInterval(inner);\r\n            if(new Date().getTime()-time&gt;=200){\r\n                touch = event.touches[0];\r\n                $ul.css(\"transition-duration\",\"0s\").css(\"-webkit-transition-duration\",\"0s\").css(\"transform\", \"translate3d(\"+ (left+touch.pageX-move) +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ (left+touch.pageX-move) +\"px,0px,0px)\");\r\n                event.preventDefault();\r\n            } \r\n        });\r\n\r\n        \/\/\u5de6\u6ed1\r\n        $li.swipeLeft(function(){\r\n            move = 0;\r\n            left = -left != parentWidth - width ? left -width : 0;\r\n            $ul.css(\"transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"-webkit-transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n            \/\/\u91cd\u7f6e\u6eda\u52a8\u4f4d\u7f6e\r\n            if(-left == (parentWidth - width)){\r\n                left = -width;\r\n                setTimeout(function(){\r\n                    $ul.css(\"transition-duration\",\"0s\").css(\"-webkit-transition-duration\",\"0s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n                },scrolltime);\r\n            }\r\n            index();\r\n        })\r\n\r\n        \/\/\u53f3\u6ed1\r\n        $li.swipeRight(function(){\r\n            move = 0;\r\n            left = left !=0 ? left + width : -parentWidth + width;\r\n            $ul.css(\"transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"-webkit-transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n            \/\/\u91cd\u7f6e\u6eda\u52a8\u4f4d\u7f6e\r\n            if(left ==0){\r\n                left = -(parentWidth - 2*width);\r\n                setTimeout(function(){\r\n                    $ul.css(\"transition-duration\",\"0s\").css(\"-webkit-transition-duration\",\"0s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n                },scrolltime);\r\n            }\r\n            index();\r\n        })\r\n\r\n        \/\/\u66f4\u65b0\u56fe\u7247\u4e0b\u65b9\u7126\u70b9\r\n        function index(){\r\n            $index.children().removeClass(\"on\");\r\n            $index.children().eq(-left\/width-1).addClass(\"on\");\r\n            $index.parent().parent().find(\".name\").text($li.eq(-left\/width-1).find(\"img\").attr(\"alt\"));\r\n        }\r\n\r\n        function auto() {\r\n            inner = setInterval(function () {\r\n                move = 0;\r\n                left = -left != parentWidth - width ? left -width : 0;\r\n                $ul.css(\"transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"-webkit-transition-duration\",(scrolltime\/1000.0)+\"s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n                if(-left == (parentWidth - width)){\r\n                    left = -width;\r\n                    setTimeout(function(){\r\n                        $ul.css(\"transition-duration\",\"0s\").css(\"-webkit-transition-duration\",\"0s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n                    },scrolltime);\r\n                }\r\n                index();\r\n            }, interval);\r\n            return inner;\r\n        }\r\n\r\n        \/\/\u6a2a\u7ad6\u5c4f\u5207\u6362\r\n        $(window).bind(\"orientationchange\", function(event){\r\n            clearInterval(inner);\r\n            width = $(window).width();\r\n            left=-width;\r\n            parentWidth=(size+2)*width;\r\n            $li.width(width).css(\"line-height\",$ul.height()+\"px\");\r\n            $li.find(\"img\").width(width);\r\n            $ul.width(parentWidth).css(\"transition-duration\",\"0s\").css(\"-webkit-transition-duration\",\"0s\").css(\"transform\", \"translate3d(\"+ left +\"px,0px,0px)\").css(\"-webkit-transform\", \"translate3d(\"+ left +\"px,0px,0px)\");\r\n            index();\r\n            if(interval!=0)\r\n                inner = auto();\r\n        });\r\n\r\n        if(interval!=0){\r\n            auto();\r\n        }\r\n    }\r\n})\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<p class=\"post-copyright\">\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a<a href=\"http:\/\/www.qdabc.cn\">\u524d\u7aefABC<\/a> &raquo; <a href=\"http:\/\/www.qdabc.cn\/?p=442\">HTML5\u79fb\u52a8\u7aef\u89e6\u6478\u5c4f\u56fe\u7247\u8f6e\u64ad\u6ed1\u52a8<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>JS_touch\u4ecb\u7ecd touchstart:\u5f53\u624b\u6307\u89e6\u6478\u5c4f\u5e55\u65f6\u89e6\u53d1\uff1b\u5373\u4f7f\u5df2\u7ecf\u6709\u4e00\u4e2a\u624b\u6307\u653e\u5728\u4e86\u5c4f\u5e55\u4e0a\u4e5f\u4f1a\u89e6\u53d1\u3002 touchmove:\u5f53\u624b\u6307\u5728\u5c4f\u5e55\u4e0a\u6ed1\u52a8\u65f6\u8fde\u7eed\u7684\u89e6\u53d1\u3002\u5728\u8fd9\u4e2a\u4e8b\u4ef6\u53d1\u751f\u671f\u95f4\uff0c\u8c03\u7528preventD [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":87,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[16,104,15,102,103],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/442"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=442"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/442\/revisions"}],"predecessor-version":[{"id":443,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/442\/revisions\/443"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=442"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}