{"id":652,"date":"2017-10-20T14:50:40","date_gmt":"2017-10-20T05:50:40","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=652"},"modified":"2017-10-20T14:50:40","modified_gmt":"2017-10-20T05:50:40","slug":"%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%9a%e3%81%ab%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%ba%e3%83%bc%e3%83%a0%e6%a9%9f%e8%83%bd%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2017\/10\/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%9a%e3%81%ab%e7%94%bb%e5%83%8f%e3%81%ae%e3%82%ba%e3%83%bc%e3%83%a0%e6%a9%9f%e8%83%bd%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6\/","title":{"rendered":"\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u308f\u305a\u306b\u753b\u50cf\u306e\u30ba\u30fc\u30e0\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046"},"content":{"rendered":"<p><!-- \u672c\u6587 --><br \/>\njquery\u3092\u4f7f\u3063\u3066\u3001\u753b\u50cf\u306e\u30ba\u30fc\u30e0\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<br \/>\n<!--more--><br \/>\n\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u4e0d\u8981\uff01<br \/>\n\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n$(function () {\r\n\r\n    $(window).mousemove(function (e) {\r\n\r\n\r\n        if (e.pageX > $(\"#base\").offset().left && e.pageX <= $(\"#base\").offset().left + $(\"#base\").width() &#038;&#038; e.pageY >= $(\"#base\").offset().top && e.pageY <= $(\"#base\").offset().top + $(\"#base\").height()) {\r\n\r\n            var posX = e.pageX;\r\n            var posY = e.pageY;\r\n\r\n            if (e.pageX <= $(\"#base\").offset().left + 16) {\r\n                posX = $(\"#base\").offset().left;\r\n            } else if (e.pageX >= $(\"#base\").offset().left + $(\"#base\").width() - 16) {\r\n                posX = $(\"#base\").offset().left + $(\"#base\").width() - 32;\r\n            } else {\r\n                posX -= 16;\r\n            }\r\n\r\n            \/\/ span\u8981\u7d20\u304c#base\u5185\u306b\u53ce\u307e\u308b\u3088\u3046\u8abf\u6574\uff08\u7e26\u4f4d\u7f6e\uff09\r\n            if (e.pageY <= $(\"#base\").offset().top + 10.75) {\r\n                posY = $(\"#base\").offset().top;\r\n            } else if (e.pageY >= $(\"#base\").offset().top + $(\"#base\").height() - 10.75) {\r\n                posY = $(\"#base\").offset().top + $(\"#base\").height() - 21.5;\r\n            } else {\r\n                posY -= 10.75;\r\n            }\r\n            $(\"span\").css({\r\n                \"top\": posY,\r\n                \"left\": posX\r\n            });\r\n            $(\"span\").show();\r\n            $(\"#zoom img\").css(\"top\", ($(\"#base\").offset().top - posY) * 20);\r\n            $(\"#zoom img\").css(\"left\", ($(\"#base\").offset().left - posX) * 20);\r\n\r\n        } else {\r\n            $(\"span\").hide();\r\n        }\r\n\r\n    });\r\n});\r\n<\/pre>\n<p>\u25bcCSS<\/p>\n<pre class=\"lang:css decode:true \" title=\"CSS\" >\r\n<style type=\"text\/css\">\r\nbody{\r\n    width: 100%;\r\n    height: 700px;\r\n    margin: 0 auto;\r\n    \r\n}\r\nheader{\r\n    height: 30px\r\n}\r\n#base{\r\n    width: 320px;\r\n    height: 215px;\r\n    margin: 0 auto;\r\n    \r\n}\r\n\r\nspan{\r\n    width: 32px;\r\n    height: 21.5px;\r\n    display: none;\r\n    position: absolute;\r\n    border: 1px solid #000000;\r\n    background:rgba(128,128,128,.5);\r\n}\r\n#zoom{\r\nwidth:640px;\r\nheight: 430px;\r\noverflow: hidden;\r\nposition: relative;\r\n    margin:0 auto;\r\n}\r\n#zoom img{\r\n    position: absolute;\r\n    top:0;\r\n    left:0;\r\n}\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\" >\r\n<header>\r\n  <h1>\u753b\u50cf\u3092\u30ba\u30fc\u30e0<\/h1>\r\n<\/header>\r\n<div id=\"base\">\r\n    <img decoding=\"async\" loading=\"lazy\" src=\"93d34990255c92d5ba645698d005d697_s.jpg\" width=\"320px\" height=\"215px\" alt=\"sashimi\">\r\n    <span><\/span>\r\n<\/div>\r\n<div id=\"zoom\">\r\n    <img decoding=\"async\" loading=\"lazy\" src=\"93d34990255c92d5ba645698d005d697_l.jpg\"  width=\"6400px\" height=\"4300px\" alt=\"sashimi\">\r\n<\/div>\r\n<\/pre>\n<p><a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/zoom20\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>jquery\u3092\u4f7f\u3063\u3066\u3001\u753b\u50cf\u306e\u30ba\u30fc\u30e0\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/652"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":3,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/652\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}