{"id":1684,"date":"2017-03-24T08:20:12","date_gmt":"2017-03-24T00:20:12","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1684"},"modified":"2017-03-24T01:24:05","modified_gmt":"2017-03-23T17:24:05","slug":"javascript%e7%ae%80%e5%8d%95%e7%a7%bb%e5%8a%a8%e7%ab%af%e8%87%aa%e9%80%82%e5%ba%94%e8%bd%ae%e6%92%ad%e5%9b%be","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1684","title":{"rendered":"JavaScript\u7b80\u5355\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u8f6e\u64ad\u56fe"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <meta content=\"yes\" name=\"apple-mobile-web-app-capable\">\r\n  <meta content=\"yes\" name=\"apple-touch-fullscreen\">\r\n  <meta content=\"telephone=no,email=no\" name=\"format-detection\">\r\n  <style type=\"text\/css\">\r\n    body,dl,h1,h3,h5,h6,hr,p,pre {\r\n      margin:0;\r\n    }\r\n    th,td,input,textarea {\r\n      padding:0;\r\n    }\r\n    ol,ul {\r\n      margin:0;\r\n      padding:0;\r\n      list-style:none;\r\n    }\r\n    input,button {\r\n      -webkit-appearance:none;\r\n    }\r\n    a {\r\n      text-decoration:none;\r\n    }\r\n    .clearfix:after {\r\n      content:\"\\200B\";\r\n      display:block;\r\n      height:0;\r\n      clear:both;\r\n    }\r\n    \/*banner,\u6eda\u52a8\u56fe*\/\r\n    .banner {\r\n      position:relative;\r\n      width:100%;\r\n      height:4.1rem;\r\n    }\r\n    .bannerbox,.bannerindex {\r\n      position:absolute;\r\n    }\r\n    .bannerbox {\r\n      top:0;\r\n      left:0;\r\n      right:0;\r\n      bottom:0;\r\n      z-index:1;\r\n      overflow:hidden;\r\n    }\r\n    .bannerlist {\r\n      position:relative;\r\n      width:31rem;\r\n      overflow:hidden;\r\n    }\r\n    .bannerlist a {\r\n      float:left;\r\n    }\r\n    .bannerlist img {\r\n      display:block;\r\n      width:10rem;\r\n      height:4.11rem;\r\n      border:none;\r\n    }\r\n    .bannerindex {\r\n      right:0;\r\n      bottom:.3rem;\r\n      \/*width:100%*\/;\r\n      z-index:2;\r\n      font-size:0;\r\n      text-align:center;\r\n    }\r\n    .bannerindex li {\r\n      display:inline-block;\r\n      margin:0 .16rem;\r\n      width:.15rem;\r\n      height:.15rem;\r\n      border-radius:.2rem;\r\n      background-color:#e5e5e5;\r\n    }\r\n    .bannerindex li.thisindex {\r\n      background-color:#6d35cb;\r\n    }\r\n    .test{\r\n      font-size: 0.2rem;\r\n      line-height: 0.4rem;\r\n      color: #7297FF;\r\n      text-align: center;\r\n    }\r\n  <\/style>\r\n  <!-- \u81ea\u9002\u5e94 -->\r\n  <script type=\"text\/javascript\">\r\n    (function (_window) {\r\n    \/\/ \u8ba1\u7b97dpr\r\n    var navigatorUserAgent = navigator.userAgent;\r\n    var iPhone = navigatorUserAgent.indexOf(\"iPhone\");\r\n    if (iPhone > -1) {\r\n      var dpr = Number(window.devicePixelRatio),\r\n      one_dpr = 1 \/ dpr;\r\n    } else {\r\n      var dpr = 1,\r\n      one_dpr = 1;\r\n    }\r\n    var writeText = \"<meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=\" + \r\n       one_dpr + \",maximum-scale=\" + one_dpr + \",minimum-scale=\" + one_dpr + \",user-scalable=no\\\">\\n        \r\n       <meta name=\\\"'flexible\\\" content=\\\"initial-dpr=\" + dpr + \"\\\">\";\r\n    document.write(writeText);\r\n    \/\/ \u8ba1\u7b97\u5b57\u4f53\u5927\u5c0f\r\n    var html = document.getElementsByTagName(\"html\");\r\n    var F0 = 75;\r\n    html[0].setAttribute(\"data-dpr\", dpr);\r\n    var getFontSize = function getFontSize() {\r\n      var windowWidth = window.innerWidth;\r\n      html[0].style.fontSize = F0 * windowWidth \/ 750 + \"px\";\r\n    };\r\n    \/\/ \u521d\u59cb\u5316\r\n    getFontSize();\r\n    _window.addEventListener(\"resize\", getFontSize, false);\r\n  })(window); \r\n\r\n<\/script>\r\n<\/head>\r\n<body>\r\n  <!--\u8f6e\u64ad\u56fe-->\r\n  <div class=\"banner\">\r\n    <div id=\"bannerbox\" class=\"bannerbox\">\r\n      <div id=\"bannerlist\" class=\"bannerlist clearfix\">\r\n        <a href=\"#\"><img src=\"https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1490267189949&di=0574aa7d15bd0e2756f895c082d965c4&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F32%2F22742a569c2dfdba8d4943ab9422b024.jpg\"\/><\/a>\r\n        <a href=\"#\"><img src=\"https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1490267224293&di=3733ca596dc466534c438282bc474f0d&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F00%2F69%2F40%2F2f98a6cd604d1e03c9ec4d07db019ff0.jpg\"\/<\/a>\r\n        <a href=\"#\"><img src=\"https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1490267238025&di=798d47938625766187b325c1d7e5bf7c&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F73%2F22f3f0857d23a5beff98ee5d35ae4e5a.jpg\"\/><\/a>\r\n        <a href=\"#\"><img src=\"https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1490267237968&di=a0cfeba6d6385d131c9d43da1df92546&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c70757c000b50000012e7e3b1d40.jpg%40900w_1l_2o_100sh.jpg\"\/><\/a>\r\n        <a href=\"#\"><img src=\"https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1490267238025&di=0625f052fb428dccbadadeea05ccde32&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F00%2F69%2F40%2F197fc7596ea416d86b027e3b945b6e04.jpg\"\/><\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <ol id=\"bannerindex\" class=\"bannerindex\">\r\n      <li><\/li>\r\n      <li><\/li>\r\n      <li><\/li>\r\n      <li><\/li>\r\n      <li><\/li>\r\n    <\/ol>\r\n  <\/div>\r\n  <div class=\"test\">banner\u2014swiper<\/div>\r\n  <!--\u8f6e\u64ad\u6548\u679c-->\r\n  <script >\r\n\r\n    var bannerList = document.getElementById(\"bannerlist\"),\r\n    img = bannerList.getElementsByTagName(\"a\"),\r\n    bannerIndex = document.getElementById(\"bannerindex\").getElementsByTagName(\"li\"),\r\n        bannerBox = document.getElementById(\"bannerbox\"); \/\/touch\u4e8b\u4ef6\u5bb9\u5668\r\n        var index = 0,\r\n        \/\/ \u5f53\u524d\u7d22\u5f15\r\n        maxIndex = img.length - 1,\r\n        \/\/\u6700\u5927\u7d22\u5f15\r\n        classname = \"thisindex\";\r\n        var setmain,\r\n        \/\/ \u8f6e\u64ad\u4e3b\u4f53\u5b9a\u65f6\u5668\r\n        setframe,\r\n        \/\/ \u8fde\u7eed\u8fd0\u52a8\u5b9a\u65f6\u5668\r\n        time = 4000,\r\n        \/\/ \u8fde\u7eed\u95f4\u9694\u65f6\u95f4\r\n    animationIng = 0; \/\/ \u5224\u65ad\u8f6e\u64ad\u8fde\u7eed\u8fd0\u52a8\u5b9a\u65f6\u5668\u662f\u5426\u5b58\u5728\r\n    \/\/ \u901f\u5ea6\u548c\u5355\u4f4d\r\n    var velocit = 0.65;\r\n    var metric = \"rem\";\r\n    \/\/ touch\u4e8b\u4ef6\u76f8\u5173\u51fd\u6570\r\n    var start = {};\r\n    start.x = \"\";\r\n    start.right = \"\";\r\n    start.time = \"\";\r\n    var end = {};\r\n    end.x = \"\";\r\n    var html = document.getElementsByTagName(\"html\");\r\n    \/\/ px to rem\r\n    var px2rem = function px2rem(px) {\r\n      return px \/ parseFloat(html[0].style.fontSize);\r\n    };\r\n    \/\/ touchstart\r\n    var bannerStartFun = function bannerStartFun(event) {\r\n      if (animationIng == 0) {\r\n        animationIng = 1;\r\n        clearTimeout(setmain);\r\n        var e = event.touches[0];\r\n        start.x = e.pageX;\r\n        start.right = parseFloat(bannerList.style.right);\r\n        start.time = +new Date();\r\n        document.addEventListener(\"touchmove\", bannerMoveFun, false);\r\n        document.addEventListener(\"touchend\", bannerEndFun, false);\r\n      }\r\n    };\r\n    \/\/ touchmove\r\n    var bannerMoveFun = function bannerMoveFun(event) {\r\n      event.preventDefault();\r\n      var move = function move() {\r\n        var e = event.touches[0];\r\n        end.x = e.pageX;\r\n        var cha = px2rem(end.x - start.x);\r\n        bannerList.style.right = start.right - cha + metric;\r\n      };\r\n      requestAnimationFrame(move);\r\n    };\r\n    \/\/ touchend\r\n    var bannerEndFun = function bannerEndFun(event) {\r\n      end.time = +new Date();\r\n      if (end.time - start.time >= 50) {\r\n        var cha = px2rem(end.x - start.x);\r\n        if (Math.abs(cha) >= 2) {\r\n          cha > 0 ? endFunB() : endFunA();\r\n        } else {\r\n          endFunC();\r\n        }\r\n      } else {\r\n        endFunC();\r\n      }\r\n      document.removeEventListener(\"touchmove\", bannerMoveFun);\r\n      document.removeEventListener(\"touchend\", bannerEndFun);\r\n    };\r\n    \/\/ touchend\u5224\u65ad\u5e76\u6267\u884c\u76f8\u5e94\u7684\u51fd\u6570\r\n    \/\/ \u52a0\u52a0\u51fd\u6570\r\n    var endFunA = function endFunA() {\r\n      bannerIndex[index].classList.remove(classname);\r\n      index == maxIndex ? index = 0 : index++;\r\n      bannerIndex[index].classList.add(classname);\r\n      animation(20, function () {\r\n        enlargeCallBack();\r\n        animationIng = 0;\r\n        setmain = setTimeout(main, time);\r\n      });\r\n    };\r\n    \/\/ \u51cf\u51cf\u51fd\u6570\r\n    var endFunB = function endFunB() {\r\n      bannerIndex[index].classList.remove(classname);\r\n      index == 0 ? index = maxIndex : index--;\r\n      bannerIndex[index].classList.add(classname);\r\n      animation(0, function () {\r\n        reduceCallBack();\r\n        animationIng = 0;\r\n        setmain = setTimeout(main, time);\r\n      });\r\n    };\r\n    \/\/ index\u4e0d\u53d8\u7684\u51fd\u6570\r\n    var endFunC = function endFunC() {\r\n      animation(10, function () {\r\n        animationIng = 0;\r\n        setmain = setTimeout(main, time);\r\n      });\r\n    };\r\n    \/\/ index++\u56de\u8c03\u51fd\u6570\r\n    var enlargeCallBack = function enlargeCallBack() {\r\n      bannerList.appendChild(img[0]);\r\n      bannerList.style.right = \"10\" + metric;\r\n    };\r\n    \/\/ index--\u56de\u8c03\u51fd\u6570\r\n    var reduceCallBack = function reduceCallBack() {\r\n      bannerList.insertBefore(img[maxIndex], img[0]);\r\n      bannerList.style.right = \"10\" + metric;\r\n    };\r\n    \/\/ \u52a8\u753b\u51fd\u6570\r\n    var animation = function animation(target, callback) {\r\n      var v = \"\";\r\n      var start = parseFloat(bannerList.style.right);\r\n      start < target ? v = +velocit : v = -velocit;\r\n      var frame = function frame() {\r\n        var right = parseFloat(bannerList.style.right);\r\n        if (Math.abs(target - right) > velocit) {\r\n          bannerList.style.right = v + right + metric;\r\n          setframe = requestAnimationFrame(frame);\r\n        } else {\r\n          bannerList.style.right = target + metric;\r\n          callback ? callback() : \"\";\r\n        }\r\n      };\r\n      setframe = requestAnimationFrame(frame);\r\n    };\r\n    \/\/ \u8f6e\u64ad\u4e3b\u51fd\u6570\r\n    var main = function main() {\r\n      animationIng = 1;\r\n      bannerIndex[index].classList.remove(classname);\r\n      index == maxIndex ? index = 0 : index++;\r\n      bannerIndex[index].classList.add(classname);\r\n      animation(20, function () {\r\n        enlargeCallBack();\r\n        animationIng = 0;\r\n        setmain = setTimeout(main, time);\r\n      });\r\n    };\r\n    \/\/ \u521d\u59cb\u5316\r\n    var init = function init() {\r\n      bannerList.insertBefore(img[maxIndex], img[0]);\r\n      bannerList.style.right = \"10\" + metric;\r\n      bannerIndex[0].classList.add(classname);\r\n      bannerBox.addEventListener(\"touchstart\", bannerStartFun, false);\r\n      setmain = setTimeout(main, time);\r\n    };\r\n    init(); \r\n  <\/script>\r\n  <\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » JavaScript\u7b80\u5355\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u8f6e\u64ad\u56fe<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta content=”yes”  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,15,150],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1684"}],"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=1684"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1684\/revisions"}],"predecessor-version":[{"id":1685,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1684\/revisions\/1685"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1684"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}