{"id":2720,"date":"2021-06-22T17:04:05","date_gmt":"2021-06-22T09:04:05","guid":{"rendered":"http:\/\/www.iooe.cn\/?p=2720"},"modified":"2021-06-22T17:04:05","modified_gmt":"2021-06-22T09:04:05","slug":"%e5%85%b3%e4%ba%8e%e4%bc%81%e4%b8%9a%e5%be%ae%e4%bf%a1pc%e7%ab%afwx-previewimage%e6%97%a0%e6%95%88%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/www.iooe.cn\/index.php\/2021\/06\/22\/%e5%85%b3%e4%ba%8e%e4%bc%81%e4%b8%9a%e5%be%ae%e4%bf%a1pc%e7%ab%afwx-previewimage%e6%97%a0%e6%95%88%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88\/","title":{"rendered":"\u5173\u4e8e\u4f01\u4e1a\u5fae\u4fe1pc\u7aefwx.previewImage\u65e0\u6548\u95ee\u9898\u89e3\u51b3\u65b9\u6848"},"content":{"rendered":"\n<p>\u7528\u4e86js\u4ee3\u7801\u89e3\u51b3<\/p>\n\n\n\n<p>\u8c03\u7528\u4ee3\u7801\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\u56fe\u7247\u9884\u89c8\n\t\t$(\"#Tolist\").on(\"click\",\".img_prev\",function(){\n\t\t\tvar hosts = window.location.host; \n\t\t    var url =\"http:\/\/\"+hosts+$(this).attr(\"src\");\n \t\t\tvar arr = Array();\n \t\t\t$(\".img_prev\").each(function(index){\n\t\t    var temp = \"http:\/\/\"+hosts+$(this).attr(\"src\");\n\t\t\t    \/\/alert(index);\n\t\t\t\tarr.push(temp);\n\t\t\t});\n \n            \/\/\u79fb\u52a8\u7aef\u67e5\u770b\u56fe\u7247\n\t\t\twx.previewImage({\n\t\t\t\tcurrent:encodeURI(url), \/\/ \u5f53\u524d\u663e\u793a\u56fe\u7247\u7684http\u94fe\u63a5\n\t\t\t\turls: arr, \/\/ \u9700\u8981\u9884\u89c8\u7684\u56fe\u7247http\u94fe\u63a5\u5217\u8868\n\t\t\t\tfail:function(e){\n\t\t\t\t\t\/\/pc\u7aef\u67e5\u770b\u56fe\u7247\n\t\t\t\t\tvar _this = $(this);\n\t\t\t\t\timgShow(\"#outerdiv\", \"#innerdiv\", \"#bigimg\", url);\n\t\t\t\t},\n\t\t\t\tcomplete:function(e){\n\t\t\t\t\tconsole.log(e);\n\t\t\t\t}\n\t\t\t\t\n\t\t\t});\n\t\t\t\n\t\t});<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"657\" height=\"409\" src=\"http:\/\/www.iooe.cn\/wp-content\/uploads\/2021\/06\/\u622a\u5c4f2021-06-22-\u4e0b\u53485.01.07.png\" alt=\"\" class=\"wp-image-2721\" srcset=\"https:\/\/www.iooe.cn\/wp-content\/uploads\/2021\/06\/\u622a\u5c4f2021-06-22-\u4e0b\u53485.01.07.png 657w, https:\/\/www.iooe.cn\/wp-content\/uploads\/2021\/06\/\u622a\u5c4f2021-06-22-\u4e0b\u53485.01.07-300x187.png 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<p>\u5b9e\u73b0\u4ee3\u7801\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/pc\u7aef\u67e5\u770b\u56fe\u7247\u65b9\u5f0f\nvar isShow = false;\n    function imgShow(outerdiv, innerdiv, bigimg, url) {\n\n        var src =url;\/\/_this.attr(\"value\");\/\/\u83b7\u53d6\u5f53\u524d\u70b9\u51fb\u7684pimg\u5143\u7d20\u4e2d\u7684src\u5c5e\u6027\n        $(bigimg).attr(\"src\", src);\/\/\u8bbe\u7f6e#bigimg\u5143\u7d20\u7684src\u5c5e\u6027\n\n        \/!*\u83b7\u53d6\u5f53\u524d\u70b9\u51fb\u56fe\u7247\u7684\u771f\u5b9e\u5927\u5c0f\uff0c\u5e76\u663e\u793a\u5f39\u51fa\u5c42\u53ca\u5927\u56fe*!\/\n        $(\"&lt;img\/>\").attr(\"src\", src).load(function () {\n            var windowW = $(window).width();\/\/\u83b7\u53d6\u5f53\u524d\u7a97\u53e3\u5bbd\u5ea6\n            var windowH = $(window).height();\/\/\u83b7\u53d6\u5f53\u524d\u7a97\u53e3\u9ad8\u5ea6\n            var realWidth = this.width;\/\/\u83b7\u53d6\u56fe\u7247\u771f\u5b9e\u5bbd\u5ea6\n            var realHeight = this.height;\/\/\u83b7\u53d6\u56fe\u7247\u771f\u5b9e\u9ad8\u5ea6\n            var imgWidth, imgHeight;\n            var scale = 0.9;\/\/\u7f29\u653e\u5c3a\u5bf8\uff0c\u5f53\u56fe\u7247\u771f\u5b9e\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5927\u4e8e\u7a97\u53e3\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u65f6\u8fdb\u884c\u7f29\u653e\n            if (realHeight > windowH * scale) {\n                imgHeight = windowH * scale;\n                imgWidth = imgHeight \/ realHeight * realWidth;\n                if (imgWidth > windowW * scale) {\n                    imgWidth = windowW * scale;\n                }\n            } else if (realWidth > windowW * scale) {\n                imgWidth = windowW * scale;\n                imgHeight = imgWidth \/ realWidth * realHeight;\n            } else {\n                imgWidth = realWidth;\n                imgHeight = realHeight;\n            }\n            $(bigimg).css(\"width\", imgWidth);\/\/\u4ee5\u6700\u7ec8\u7684\u5bbd\u5ea6\u5bf9\u56fe\u7247\u7f29\u653e\n            var w = (windowW - imgWidth) \/ 2;\/\/ \u8ba1\u7b97\u56fe\u7247\u4e0e\u7a97\u53e3\u5de6\u8fb9\u8ddd\n            var h = (windowH - imgHeight) \/ 2;\/\/ \u8ba1\u7b97\u56fe\u7247\u4e0e\u7a97\u53e3\u4e0a\u8fb9\u8ddd\n            $(innerdiv).css({\n                \"top\": h,\n                \"left\": w\n            });\/\/\u8bbe\u7f6e#innerdiv\u7684top\u548cleft\u5c5e\u6027\n            $(outerdiv).fadeIn(\"fast\", showmask);\/\/\u6de1\u5165\u663e\u793a#outerdiv\u53ca.pimg\n        });\n        var e = window.event || arguments.callee.caller.arguments&#91;0];\n        stopBubble(e);\n        $(outerdiv).click(function () {\n            if(isShow)\n                $(this).fadeOut(\"fast\");\n                isShow = false;\n        });\n        \n    }\n    function showmask() {\n        isShow = true;\n    }\n    function stopBubble(e) {\n        \/\/\u5982\u679c\u63d0\u4f9b\u4e86\u4e8b\u4ef6\u5bf9\u8c61\uff0c\u5219\u8fd9\u662f\u4e00\u4e2a\u975eIE\u6d4f\u89c8\u5668 \n        if (e &amp;&amp; e.stopPropagation)\n        \/\/\u56e0\u6b64\u5b83\u652f\u6301W3C\u7684stopPropagation()\u65b9\u6cd5 \n            e.stopPropagation();\n        else\n        \/\/\u5426\u5219\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528IE\u7684\u65b9\u5f0f\u6765\u53d6\u6d88\u4e8b\u4ef6\u5192\u6ce1 \n            window.event.cancelBubble = true;\n    }<\/code><\/pre>\n\n\n\n<p>\u8bf4\u660e\uff1a\u5728wx.previewImage\u4ee3\u7801\u4e2d\u7684fail\u56de\u8c03\u6cd5\u4e2d\uff0c\u53bb\u8c03\u7528\u81ea\u884c\u5199\u7684\u67e5\u770b\u56fe\u7247\u663e\u793a\u7684js\u4ee3\u7801\u3002 \u5b9e\u73b0\u5927\u56fe\u9884\u89c8\u3002 <\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7528\u4e86js\u4ee3\u7801\u89e3\u51b3 \u8c03\u7528\u4ee3\u7801\uff1a \u5b9e\u73b0\u4ee3\u7801\uff1a \u8bf4\u660e\uff1a\u5728wx.previewImage\u4ee3\u7801\u4e2d\u7684fail\u56de\u8c03\u6cd5\u4e2d\uff0c\u53bb\u8c03\u7528\u81ea\u884c\u5199\u7684\u67e5\u770b\u56fe\u7247\u663e\u793a\u7684js\u4ee3\u7801\u3002 \u5b9e\u73b0\u5927\u56fe\u9884\u89c8\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts\/2720"}],"collection":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/comments?post=2720"}],"version-history":[{"count":1,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts\/2720\/revisions"}],"predecessor-version":[{"id":2722,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/posts\/2720\/revisions\/2722"}],"wp:attachment":[{"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/media?parent=2720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/categories?post=2720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iooe.cn\/index.php\/wp-json\/wp\/v2\/tags?post=2720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}