{"id":2362,"date":"2017-05-24T10:46:46","date_gmt":"2017-05-24T02:46:46","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2362"},"modified":"2017-05-24T10:46:46","modified_gmt":"2017-05-24T02:46:46","slug":"%e4%ba%ac%e4%b8%9c%e7%a7%bb%e5%8a%a8%e7%ab%af%e4%be%a7%e8%be%b9%e6%a0%8f%e8%a7%a6%e6%91%b8%e4%ba%8b%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2362","title":{"rendered":"\u4eac\u4e1c\u79fb\u52a8\u7aef\u4fa7\u8fb9\u680f\u89e6\u6478\u4e8b\u4ef6"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"\/>\r\n    <title>\u4eac\u4e1c\u4fa7\u8fb9\u680f\u89e6\u6478\u4e8b\u4ef6-\u624b\u673a\u6a21\u5f0f\u6d4b\u8bd5<\/title>\r\n    <style>\r\n        *{\r\n            margin: 0;\r\n            padding: 0;\r\n            -webkit-box-sizing: border-box;\r\n            -moz-box-sizing: border-box;\r\n            box-sizing: border-box;\r\n        }\r\n        a,a:hover{\r\n            color: #333;\r\n            text-decoration: none;\r\n            display: block;\r\n            height: 50px;\r\n            line-height: 50px;\r\n            text-align: center;\r\n        }\r\n        .box{\r\n            height: 500px;\r\n            margin: 30px auto;\r\n            width: 90px;\r\n            border: 1px solid red;\r\n            overflow: hidden;\r\n        }\r\n        ul li{\r\n            width: 90px;\r\n            height: 50px;\r\n            border-bottom: 1px solid #ccc;\r\n            border-right: 1px solid #ccc;\r\n            list-style: none;\r\n        }\r\n        .cur>a{\r\n            color: red;\r\n            border-right: none;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"box\">\r\n    <ul>\r\n        <li class=\"cur\"><a href=\"javascript:;\">\u70ed\u95e8\u63a8\u8350<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u6f6e\u6d41\u5973\u88c5<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u54c1\u724c\u7537\u88c5<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5185\u8863\u914d\u9970<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5bb6\u7528\u7535\u5668<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u7535\u8111\u529e\u516c<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u624b\u673a\u6570\u7801<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u6bcd\u5a74\u9891\u9053<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u56fe\u4e66<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5bb6\u5c45\u5bb6\u7eba<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5c45\u5bb6\u751f\u6d3b<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5bb6\u5177\u5efa\u6750<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u70ed\u95e8\u63a8\u8350<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u6f6e\u6d41\u5973\u88c5<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u54c1\u724c\u7537\u88c5<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5185\u8863\u914d\u9970<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5bb6\u7528\u7535\u5668<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u7535\u8111\u529e\u516c<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u624b\u673a\u6570\u7801<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u6bcd\u5a74\u9891\u9053<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u56fe\u4e66<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5bb6\u5c45\u5bb6\u7eba<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5c45\u5bb6\u751f\u6d3b<\/a><\/li>\r\n        <li><a href=\"javascript:;\">\u5bb6\u5177\u5efa\u6750<\/a><\/li>\r\n    <\/ul>\r\n<\/div>\r\n<\/body>\r\n\r\n<script>\r\n    var box=document.querySelector('.box');\r\n    var ul=box.querySelector('ul');\r\n    var lis=ul.querySelectorAll('li');\r\n\r\n    \/*-----\u5b9a\u4f4d\u7684\u6700\u5927\u3001\u6700\u5c0f\u4f4d\u7f6e-----*\/\r\n    var maxTop=0;\r\n    var minTop=box.offsetHeight-ul.offsetHeight;\r\n\r\n\r\n    \/*-----------\u62d6\u52a8ul\u6700\u5927\u6700\u5c0f\u4f4d\u7f6e-------------*\/\r\n    var maxSwipe=maxTop+120;\r\n    var minSwipe=minTop-120;\r\n\r\n    \/*---\u8bb0\u5f55\u5f53\u524d\u7684\u503c---*\/\r\n    var currentY=0;\r\n\r\n    \/*\u5c01\u88c5\u6dfb\u52a0\u8fc7\u6e21\u52a8\u753b*\/\r\n    function setTransition(){\r\n        ul.style.webkitTransition='transform 0.3s';\r\n        ul.style.transition='transform 0.3s';\r\n    }\r\n    \/*\u5c01\u88c5\u5220\u9664\u7684\u8fc7\u6e21\u52a8\u753b*\/\r\n    function removeTransition(){\r\n        ul.style.webkitTransition='none';\r\n        ul.style.transition='none';\r\n    }\r\n    \/*\u5c01\u88c5\u6dfb\u52a0Y\u8f74\u79fb\u52a8*\/\r\n    function setTranslateY(x){\r\n        ul.style.webkitTransform='translateY('+x+'px)';\r\n        ul.style.transform='translateY('+x+'px)';\r\n    }\r\n\r\n    \/*---------------------\u70b9\u51fb\u989c\u8272\u53d8\u5316&&\u70b9\u51fb\u7684li\u79fb\u52a8\u5230\u6700\u9876\u7aef----------------------*\/\r\n    Myclcik(box,function(){\r\n        box.addEventListener('click',function(e){\r\n            var target= e.target.parentNode;\r\n            console.log(target);\r\n            for(var i=0;i<lis.length;i++){\r\n                lis[i].classList.remove('cur');\r\n                lis[i].index=i;\r\n            }\r\n            target.classList.add('cur');\r\n            var y=-target.index*50;\r\n            if(y>maxTop){\r\n                y=maxTop;\r\n            }\r\n            if(y<minTop){\r\n                y=minTop;\r\n            }\r\n            setTransition();\r\n            setTranslateY(y);\r\n            currentY=y;\r\n        })\r\n    })\r\n\r\n    \/*------------------\u624b\u52a8\u79fb\u52a8ul && \u6709\u9650\u5236\u8303\u56f4------------------------*\/\r\n\r\n    var startY=0;\r\n    var moveY=0;\r\n    var distanceY=0;\r\n\r\n    ul.addEventListener('touchstart',function(e){\r\n        startY= e.targetTouches[0].clientY;\r\n    })\r\n\r\n    ul.addEventListener('touchmove',function(e){\r\n        moveY= e.targetTouches[0].clientY;\r\n        distanceY=moveY-startY;\r\n        var y=distanceY+currentY;\r\n\r\n        if(y>maxSwipe){\r\n            y=maxSwipe;\r\n        }\r\n        if(y<minSwipe){\r\n            y=minSwipe;\r\n        }\r\n        removeTransition();\r\n        setTranslateY(y);\r\n    })\r\n\r\n    ul.addEventListener('touchend',function(e){\r\n        currentY=currentY+distanceY;\r\n        if(currentY>maxTop){\r\n            currentY=maxTop;\r\n            setTransition()\r\n            setTranslateY(currentY);\r\n        }\r\n        if(currentY<minTop){\r\n            currentY=minTop;\r\n            setTransition();\r\n            setTranslateY(currentY);\r\n        }\r\n\r\n        \/*---------\u6570\u636e\u91cd\u7f6e---------*\/\r\n        startY=0;\r\n        moveY=0;\r\n        distanceY=0;\r\n    })\r\n\r\n\r\n    \/*\u5c01\u88c5\u79fb\u52a8\u7aef\u7684\u70b9\u51fb\u51fd\u6570*\/\r\n    function Myclcik(obj,callback){\r\n        if(typeof obj=='object'){\r\n            var startTime=0;\r\n            var isMove=false;\r\n\r\n            obj.addEventListener('touchstart',function(){\r\n                startTime=Date.now();\r\n            })\r\n\r\n            obj.addEventListener('touchmove',function(){\r\n                isMove=true;\r\n            })\r\n\r\n            obj.addEventListener('touchend',function(){\r\n                if(Date.now()-startTime<150 && !isMove){\r\n                    callback && callback();\r\n                }\r\n                startTime=0;\r\n                isMove=false;\r\n            })\r\n        }\r\n    }\r\n<\/script>\r\n\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u4eac\u4e1c\u79fb\u52a8\u7aef\u4fa7\u8fb9\u680f\u89e6\u6478\u4e8b\u4ef6<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <meta name […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[9,318,15,337],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2362"}],"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=2362"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2362\/revisions"}],"predecessor-version":[{"id":2363,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2362\/revisions\/2363"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2362"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}