{"id":7162,"date":"2019-06-17T15:20:07","date_gmt":"2019-06-17T07:20:07","guid":{"rendered":"https:\/\/www.npc.ink\/7162.html"},"modified":"2020-03-28T18:11:11","modified_gmt":"2020-03-28T10:11:11","slug":"viewimage-%e5%93%8d%e5%ba%94%e5%bc%8f%e6%9e%81%e7%ae%80%e7%81%af%e7%ae%b1%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/www.npc.ink\/7162.html","title":{"rendered":"ViewImage - \u54cd\u5e94\u5f0f\u6781\u7b80\u706f\u7bb1\u63d2\u4ef6"},"content":{"rendered":"\n
\u57fa\u4e8ejQuery \uff0cGzip\u540e\u4e0d\u8db3 1kb \u7684\u54cd\u5e94\u5f0f\u6781\u7b80\u706f\u7bb1\u63d2\u4ef6\u3002<\/p>\n\n\n\n
\u57fa\u4e8ejQuery \uff0cGzip\u540e\u4e0d\u8db3 1kb \u7684\u54cd\u5e94\u5f0f\u6781\u7b80\u706f\u7bb1\u63d2\u4ef6<\/p>\n\n\n\n
\u5728\u9875\u5e95\u63d0\u4f9b\u7684\u4e0b\u8f7d\u6587\u4ef6\u4e2d\u83b7\u53d6\uff1a<\/p>\n\n\n\n
view-image.js\u00a0or\u00a0view-image.min.js<\/p>\n\n\n\n
\u9996\u5148\u786e\u4fdd\u4f60\u7684\u9875\u9762\u5df2\u7ecf\u6b63\u786e\u5f15\u7528jQuery\uff08\u5efa\u8bae2.0+\uff09\uff0c\u7136\u540e\u518d\u5f15\u7528ViewImage.js\u3002<\/p>\n\n\n\n
<script src=\"\/\/tokinx.github.io\/ViewImage\/view-image.min.js\"><\/script><\/code><\/pre>\n\n\n\n\u542f\u7528<\/h2>\n\n\n\n
\u6211\u4eec\u4e3a\u60a8\u63d0\u4f9b\u4e86\u975e\u5e38\u7b80\u4fbf\u7684\u521d\u59cb\u5316\u65b9\u6cd5\uff0c\u65b9\u4fbf\u60a8\u5bf9\u7a0b\u5e8f\u8fdb\u884c\u4e00\u4e9b\u4e2a\u6027\u5316\u8bbe\u7f6e\u5e76\u6b63\u786e\u542f\u7528<\/p>\n\n\n\n
<script>\n jQuery(document).ready(function () {\n jQuery.viewImage({\n 'target' : '.view-image img', \/\/\u9700\u8981\u4f7f\u7528ViewImage\u7684\u56fe\u7247\n 'exclude': '.exclude img', \/\/\u8981\u6392\u9664\u7684\u56fe\u7247\n 'delay' : 300 \/\/\u5ef6\u8fdf\u65f6\u95f4\n });\n });\n<\/script><\/code><\/pre>\n\n\n\n \u793a\u4f8b \uff1a<\/h2>\n\n\n\n
\u6211\u4eec\u63d0\u4f9b\u4e86\u51e0\u4e2aDEMO\uff0c\u65b9\u4fbf\u60a8\u8fdb\u4e00\u6b65\u4e86\u89e3ViewImage<\/p>\n\n\n\n
<script>\n jQuery(document).ready(function () {\n jQuery.viewImage({\n 'target': '.view-image img,.view-image2 a,.view-image3 a',\n 'exclude': '.exc',\n 'delay': 300\n });\n });\n<\/script><\/code><\/pre>\n\n\n\n[\u56fe\u7247]<\/h3>\n\n\n\n<ul class=\"view-image\">\n <li><img src=\"\u539f\u56fe\"><\/li>\n <li><img src=\"\u539f\u56fe\"><\/li>\n <li><img src=\"\u539f\u56fe\"><\/li>\n <li><img src=\"\u539f\u56fe\" class=\"exc\"><\/li>\n<\/ul><\/code><\/pre>\n\n\n\n[\u94fe\u63a5] + [\u6587\u5b57]<\/h3>\n\n\n\n<ul class=\"view-image2\">\n <li><a href=\"\u539f\u56fe\">\u53ef\u7528<\/a><\/li>\n <li><a href=\"\u539f\u56fe\" class=\"exc\">\u4e0d\u53ef\u7528<\/a><\/li>\n<\/ul><\/code><\/pre>\n\n\n\n[\u94fe\u63a5] + [\u7f29\u7565\u56fe]<\/h3>\n\n\n\n<ul class=\"view-image3\">\n <li><a href=\"\u539f\u56fe\"><img src=\"\u7f29\u7565\u56fe \u6216 \u539f\u56fe\"><\/a><\/li>\n <li><a href=\"\u539f\u56fe\" class=\"exc\"><img src=\"\u7f29\u7565\u56fe \u6216 \u539f\u56fe\"><\/a><\/li>\n<\/ul><\/code><\/pre>\n\n\n\n\u517c\u5bb9\u6027\uff1a<\/h2>\n\n\n\nD\\T<\/th> Firefox<\/th> Chrome<\/th> MSIE<\/th> Safari<\/th><\/tr><\/thead> PC<\/td> >=3.5<\/td> Yes<\/td> >=9<\/td> >=3.1<\/td><\/tr> Mobile<\/td> Null<\/td> Null<\/td> Null<\/td> Null<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n\u5982\u679c\u60a8\u9700\u8981\u4e00\u6b3e\u529f\u80fd\u66f4\u52a0\u4e30\u5bcc\u7684\u706f\u7bb1\uff0c\u90a3\u4e48\u8fd8\u53ef\u4ee5\u770b\u770b\u8fd9\u7bc7\uff1a<\/p>\n\n\n