{"id":743,"date":"2017-03-06T16:34:25","date_gmt":"2017-03-06T08:34:25","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=743"},"modified":"2017-03-06T16:34:25","modified_gmt":"2017-03-06T08:34:25","slug":"%e4%bb%bf%e6%8b%89%e5%8b%be%e7%bd%91%e9%a6%96%e9%a1%b5%e7%a9%bf%e5%a2%99%e5%b9%bf%e5%91%8a%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=743","title":{"rendered":"\u4eff\u62c9\u52fe\u7f51\u9996\u9875\u7a7f\u5899\u5e7f\u544a\u6548\u679c"},"content":{"rendered":"
<!doctype html>\r\n<html>\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>\u524d\u7aefABC-qdabc.cn<\/title>\r\n<style>\r\n*{margin:0; padding:0; list-style:none;}\r\nul{ overflow:hidden; width:630px; margin:100px auto;}\r\nul li{ float:left; position:relative; width:200px; height:200px; background:#ccc; margin:5px; overflow:hidden;}\r\nul li span{ position:absolute; width:100%; height:100%; background:rgba(255,0,0,0.3); left:-200px; top:0;}\r\n<\/style>\r\n<script>\r\nfunction getStyle(obj,sName){\r\n    return (obj.currentStyle||getComputedStyle(obj,false))[sName];\r\n}\r\nfunction move(obj,json,options){\r\n    options = options||{};\r\n    options.duration = options.duration||700;\r\n    options.easing = options.easing||'ease-out';\r\n    \r\n    var start = {};\r\n    var dis = {};\r\n    for(var name in json){\r\n        start[name] = parseFloat(getStyle(obj,name));\r\n        dis[name] = json[name]-start[name];\r\n    }\r\n    var count = Math.floor(options.duration\/30);\r\n    var n = 0;\r\n    clearInterval(obj.timer);\r\n    obj.timer = setInterval(function(){\r\n        n++;\r\n        for(var name in json){\r\n            switch(options.easing){\r\n                case 'linear':\r\n                    var cur = start[name]+dis[name]*n\/count;\r\n                    break;\r\n                case 'ease-in':\r\n                    var a = n\/count;\r\n                    var cur = start[name]+dis[name]*Math.pow(a,3);\r\n                    break;\r\n                case 'ease-out':\r\n                    var a = 1-n\/count;\r\n                    var cur = start[name]+dis[name]*(1-Math.pow(a,3));\r\n                    break;\r\n            }\r\n            if(name=='opacity'){\r\n                obj.style.opacity = cur;\r\n                obj.style.filter = 'alpha(opacity:'+cur*100+')';\r\n            }else{\r\n                obj.style[name] = cur+'px';\r\n            }\r\n        }\r\n        if(n==count){\r\n            clearInterval(obj.timer);\r\n            options.complete&&options.complete();\r\n        }\r\n    },30);\r\n}\r\nfunction a2d(n){\r\n    return n*180\/Math.PI;\r\n}\r\nfunction hoverDir(ev,obj){\r\n    var a = ev.clientX-obj.offsetLeft-obj.offsetWidth\/2;\r\n    var b = obj.offsetTop+obj.offsetHeight\/2-ev.clientY;\r\n    \r\n    return Math.round((a2d(Math.atan2(b,a))+180)\/90)%4;\r\n}\r\nfunction through(obj){\r\n    var oS = obj.children[0];\r\n    obj.onmouseenter = function(ev){\r\n        var oEvent = ev||event;\r\n        var dir = hoverDir(oEvent,obj);\r\n        switch(dir){\r\n            case 0:\r\n                \/\/\u5de6\r\n                oS.style.left = '-200px';\r\n                oS.style.top = 0;\r\n                break;\r\n            case 1:\r\n                \/\/\u4e0b\r\n                oS.style.left = 0;\r\n                oS.style.top = '200px';\r\n                break;\r\n            case 2:\r\n                \/\/\u53f3\r\n                oS.style.left = '200px';\r\n                oS.style.top = 0;\r\n                break;\r\n            case 3:\r\n                \/\/\u4e0a\r\n                oS.style.left = 0;\r\n                oS.style.top = '-200px';\r\n                break;\r\n        }\r\n        move(oS,{left:0,top:0});\r\n    };\r\n    obj.onmouseleave = function(ev){\r\n        var oEvent = ev||event;\r\n        var dir = hoverDir(oEvent,obj);\r\n        switch(dir){\r\n            case 0:\r\n                move(oS,{left:-200,top:0});\r\n                break;\r\n            case 1:\r\n                move(oS,{left:0,top:200});\r\n                break;\r\n            case 2:\r\n                move(oS,{left:200,top:0});\r\n                break;\r\n            case 3:\r\n                move(oS,{left:0,top:-200});\r\n                break;\r\n        }\r\n    };\r\n}\r\nwindow.onload = function(){\r\n    var aLi = document.getElementsByTagName('li');\r\n    for(var i=0;i<aLi.length;i++){\r\n        through(aLi[i]);\r\n    }\r\n};\r\n<\/script>\r\n<\/head>\r\n\r\n<body>\r\n    <ul>\r\n        <li><span><\/span><\/li>\r\n        <li><span><\/span><\/li>\r\n        <li><span><\/span><\/li>\r\n        <li><span><\/span><\/li>\r\n        <li><span><\/span><\/li>\r\n        <li><span><\/span><\/li>\r\n    <\/ul>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u4eff\u62c9\u52fe\u7f51\u9996\u9875\u7a7f\u5899\u5e7f\u544a\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!doctype html> <html> <head> <meta charset=”UTF-8″> <title>\u524d\u7aefABC-qdab […]<\/p>\n","protected":false},"author":1,"featured_media":322,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[9],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/743"}],"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=743"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/743\/revisions"}],"predecessor-version":[{"id":744,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/743\/revisions\/744"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/322"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=743"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}