{"id":2036,"date":"2017-04-12T16:16:36","date_gmt":"2017-04-12T08:16:36","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2036"},"modified":"2017-04-12T16:16:36","modified_gmt":"2017-04-12T08:16:36","slug":"%e6%97%8b%e8%bd%ac%e6%9c%a8%e9%a9%ac%ef%bc%8c%e5%8d%95%e5%87%bb%e5%8f%af%e9%a2%84%e8%a7%88%e5%9b%be%e7%89%87","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2036","title":{"rendered":"\u65cb\u8f6c\u6728\u9a6c\uff0c\u5355\u51fb\u53ef\u9884\u89c8\u56fe\u7247"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset=\"utf-8\" \/>\r\n\t\t<title>qdabc.cn<\/title>\r\n\t\t<link rel=\"stylesheet\" href=\"..\/css\/common.css\" \/>\r\n\t\t<style>\r\n\t\t\thtml,body{ height: 100%;}\r\n\t\t\t*{ box-sizing:border-box;}\r\n\t\t\t.imgBox{ transform-style: preserve-3d; position: relative; width:100px; height: 100px; margin:200px auto 0;}\r\n\t\t\t.imgBox img.imgBox_item{width:100%; height: 100%; position: absolute; top:0; transition: transform 1s linear; cursor: pointer;\r\n\t\t\t\tborder-radius: 10px; box-shadow: 1px 1px 1px 1px #222;}\r\n\t\t\t.imgBox img.imgBox_preshow{ width:100%; height: 100%; position: absolute; top:0;transition: opacity 1s linear;\r\n\t\t\t\tborder-radius: 10px; box-shadow: 0 0 5px 2px #00BCD4; z-index: 9999; cursor: pointer; opacity: 0;}\r\n\t\t\t@keyframes xzmm{\r\n\t\t\t\tfrom{ transform: perspective(400px) rotateY( 0deg) translateZ(200px);}\r\n\t\t\t\tto{ transform: perspective(400px) rotateY( 360deg) translateZ(200px);}\r\n\t\t\t}\r\n\t\t\t.imgBox img.imgBox_item.sel{ box-shadow: 0 0 5px 2px #00BCD4;}\r\n\t\t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id=\"imgBox\" class=\"imgBox\">\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p0.so.qhimgs1.com\/bdr\/_240_\/t0172db3b26c0d1d4ac.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p0.so.qhimgs1.com\/bdr\/_240_\/t01435a4eb0bd6efd60.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p1.so.qhimgs1.com\/bdr\/_240_\/t015b7b61b7d7b6957d.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p5.so.qhimgs1.com\/bdr\/_240_\/t017e0d36aa4fbb419b.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p0.so.qhimgs1.com\/bdr\/_240_\/t0187b703add3536f20.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p2.so.qhimgs1.com\/bdr\/_240_\/t0113dc91902322c3ae.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p2.so.qhimgs1.com\/bdr\/_240_\/t01b6aba2da3d0fb5de.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p3.so.qhimgs1.com\/bdr\/_240_\/t01b3b707f7b292d023.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_item\" src=\"http:\/\/p4.so.qhimgs1.com\/bdr\/_240_\/t01b56d441e69b85004.jpg\" \/>\r\n\t\t\t<img class=\"imgBox_preshow\"\/>\r\n\t\t<\/div>\r\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.11.2.js\"><\/script>\r\n\t\t<script>\r\n\t\t\t$(function(){\r\n\t\t\t\tvar $imgBox = $(\"#imgBox\");\t\t\t\t\t\t\t\t\t\t\t\/\/ \u56fe\u7247\u5bb9\u5668\r\n\t\t\t\tvar $imgBoxItemlist = $imgBox.children(\".imgBox_item\");\t\t\t\t\/\/ \u56fe\u7247\u96c6\u5408\r\n\t\t\t\tvar $imgBoxPreshow = $imgBox.children(\".imgBox_preshow\").eq(0);\t\t\/\/ \u9884\u89c8\u56fe\u7247\r\n\t\t\t\tvar imgCount = $imgBoxItemlist.length;\t\t\t\t\t\t\t\t\/\/ \u56fe\u7247\u6570\u91cf\r\n\t\t\t\tvar dur = 9;\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/ \u65cb\u8f6c\u4e00\u5708\u6240\u9700\u65f6\u95f4\uff0c\u5355\u4f4ds\r\n\t\t\t\t\r\n\t\t\t\t\/**\r\n\t\t\t\t * \u542f\u52a8\u65cb\u8f6c\u6728\u9a6c\r\n\t\t\t\t * \u7ed9\u6bcf\u5f20\u56fe\u7247\u6dfb\u52a0\u4e00\u4e2aanimation\u52a8\u753b\uff0c\u6cbfY\u8f74\u505a3d\u65cb\u8f6c\u3002\r\n\t\t\t\t *\/\r\n\t\t\t\t$imgBox.children(\".imgBox_item\").each(function(i,dom){\r\n\t\t\t\t\tvar $this = $(this);\r\n\t\t\t\t\tvar animation = \"xzmm \"+dur+\"s linear \"+i*(dur\/imgCount)+\"s infinite forwards\";\t\/\/ animation\u6548\u679c\r\n\t\t\t\t\t\/\/ \u6dfb\u52a0\u65cb\u8f6c\u6548\u679c\r\n\t\t\t\t\t$this.css({\r\n\t\t\t\t\t\t\"z-index\":\timgCount-i,\t\t\/\/ \u8ba9\u540e\u9762\u7684\u56fe\u7247\u663e\u793a\u5728\u4e0a\u9762\r\n\t\t\t\t\t\t\"animation\":\tanimation\r\n\t\t\t\t\t}).on(\"click\",function(){\t\t\/\/ \u5355\u51fb\u4e8b\u4ef6\u3002\u5355\u51fb\u56fe\u7247\u65f6\u653e\u5927\u88ab\u5355\u51fb\u7684\u56fe\u7247\r\n\t\t\t\t\t\tvar $this = $(this);\r\n\t\t\t\t\t\t$imgBox.data(\"status\",\"paused\");\t\/\/ \u6807\u8bb0\u65cb\u8f6c\u6548\u679c\u662f\u88ab\u5355\u51fb\u6682\u505c\u7684\r\n\t\t\t\t\t\t$imgBoxItemlist.css({\r\n\t\t\t\t\t\t\t\"opacity\": \t0,\r\n\t\t\t\t\t\t\t\"pointer-events\": \"none\"\t\t\t\/\/ \u7a7f\u900f\uff0c\u9632\u6b62\u70b9\u51fb\u5230\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\/\/ \u5728\u9884\u89c8\u56fe\u7247\u4e2d\u663e\u793a\u5e76\u653e\u5927\u5f53\u524d\u5355\u51fb\u7684\u56fe\u7247\r\n\t\t\t\t\t\t$imgBoxPreshow.attr({\r\n\t\t\t\t\t\t\t\"src\":\t$this.attr(\"src\")\r\n\t\t\t\t\t\t}).css({\r\n\t\t\t\t\t\t\t\"transform\": \t$this.css(\"transform\"),\r\n\t\t\t\t\t\t\t\"opacity\": \t\t1\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\tsetTimeout(function(){\r\n\t\t\t\t\t\t\t$imgBoxPreshow.css({\r\n\t\t\t\t\t\t\t\t\"transition\":\t\"transform .5s linear\",\r\n\t\t\t\t\t\t\t\t\"transform\": \t\"scale(4)\"\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},100);\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}).on(\"mouseenter\",function(){\t\/\/ mouseenter\u4e8b\u4ef6\u3002\u9f20\u6807\u653e\u5728\u56fe\u7247\u4e0a\u65f6\uff0c\u6682\u505c\u65cb\u8f6c\r\n\t\t\t\t\t\t$(this).parent().children(\".imgBox_item\").removeClass(\"sel\").css({\r\n\t\t\t\t\t\t\t\"animation-play-state\":\t\"paused\"\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t$(this).addClass(\"sel\");\r\n\t\t\t\t\t}).on(\"mouseleave\",function(){\t\/\/ mouseleave\u4e8b\u4ef6\u3002\u9f20\u6807\u79fb\u51fa\u56fe\u7247\u65f6\uff0c\u5982\u679c\u6682\u505c\u6548\u679c\u4e0d\u662f\u88ab\u5355\u51fb\u6682\u505c\u7684\uff0c\u5219\u7ee7\u7eed\u65cb\u8f6c\r\n\t\t\t\t\t\tif($imgBox.data(\"status\")!=\"paused\"){\t\/\/ \u5982\u679c\u6682\u505c\u6548\u679c\u4e0d\u662f\u88ab\u5355\u51fb\u6682\u505c\u7684\uff0c\u5219\u7ee7\u7eed\u65cb\u8f6c\r\n\t\t\t\t\t\t\t$(this).parent().children(\".imgBox_item\").removeClass(\"sel\").css({\r\n\t\t\t\t\t\t\t\t\"animation-play-state\":\t\"running\"\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\t\t\t\t\r\n\t\t\t\t\/*\r\n\t\t\t\t * \u5173\u95ed\u9884\u89c8\u56fe\u7247\uff0c\u7ee7\u7eed\u65cb\u8f6c\u6728\u9a6c\r\n\t\t\t\t *\/\r\n\t\t\t\t$imgBoxPreshow.on(\"click\",function(){\r\n\t\t\t\t\tvar $this = $(this);\r\n\t\t\t\t\t$this.attr(\"src\",\"\").css({\r\n\t\t\t\t\t\t\"transform\": \t\"\",\r\n\t\t\t\t\t\t\"opacity\":\t\t0\r\n\t\t\t\t\t});\r\n\t\t\t\t\t$imgBox.data(\"status\",\"running\");\r\n\t\t\t\t\t$imgBoxItemlist.removeClass(\"sel\").css({\r\n\t\t\t\t\t\t\"animation-play-state\":\t\"running\",\r\n\t\t\t\t\t\t\"opacity\":\t1,\r\n\t\t\t\t\t\t\"pointer-events\": \t\"auto\"\r\n\t\t\t\t\t});\r\n\t\t\t\t});\r\n\t\t\t})\r\n\t\t<\/script>\r\n\t<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u65cb\u8f6c\u6728\u9a6c\uff0c\u5355\u51fb\u53ef\u9884\u89c8\u56fe\u7247<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ \/> <title>qdabc.cn […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[156,9,261],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2036"}],"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=2036"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2036\/revisions"}],"predecessor-version":[{"id":2037,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2036\/revisions\/2037"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2036"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}