{"id":3130,"date":"2012-02-18T17:15:37","date_gmt":"2012-02-18T08:15:37","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=3130"},"modified":"2012-02-18T17:19:43","modified_gmt":"2012-02-18T08:19:43","slug":"%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3-javascript-%e3%82%bf%e3%83%83%e3%83%81%e3%80%81%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e5%ae%9f-2","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=3130","title":{"rendered":"\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3 JavaScript \u30bf\u30c3\u30c1\u3001\u30d5\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u5b9f\u88c5\u305d\u306e2 \u300c\u30dc\u30fc\u30eb\u3092\u6295\u3052\u308b\u300d"},"content":{"rendered":"<p>\u524d\u56de\u306e<\/p>\n<h3><a href=\"https:\/\/www.webcyou.com\/?p=3121\">\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3 JavaScript \u30bf\u30c3\u30c1\u3001\u30d5\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u5b9f\u88c5<\/a><\/h3>\n<p>\u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001\u30d5\u30ea\u30c3\u30af\u306e\u5224\u5b9a\u3001CSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u30d5\u30ea\u30c3\u30af\u5224\u5b9a\u306b\u3088\u3063\u3066\u30dc\u30fc\u30eb\u3092\u98db\u3070\u3059\u3002\u306e2\u70b9\u3092\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001<\/p>\n<h4>\u30bf\u30c3\u30c1\u3001\u30d5\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u5224\u5b9a<\/h4>\n<p>\u306a\u306b\u3092\u5224\u5b9a\u3059\u308b\u304b\u3068\u3044\u3046\u3068\u3001<strong>\u53f3\u306b\u30d5\u30ea\u30c3\u30af\u3055\u308c\u305f\u306e\u304b<\/strong>\u3001<strong>\u5de6\u306b\u30d5\u30ea\u30c3\u30af\u3055\u308c\u305f\u306e\u304b<\/strong>\u3092\u5224\u5b9a\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u524d\u56de\u306e<a href=\"http:\/\/webcyou.com\/demo\/js\/flick\/flick004.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/flick\/flick004.html<\/a>\u306e\u8a18\u8ff0\u3092\u82e5\u5e72\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p><strong>JavaScript<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">function touchHandler(e){\r\n  e.preventDefault();\r\n  var touch = e.touches&#x5B;0]; \r\n  if(e.type == &quot;touchstart&quot;){\r\n    $(&quot;#txt&quot;).text(touch.pageX);\r\n    startX = touch.pageX;\r\n    }\r\n  if(e.type == &quot;touchmove&quot;){\r\n    $(&quot;#txt&quot;).text(touch.pageX);\r\n    curX = touch.pageX;\r\n    }\r\n  if(e.type == &quot;touchend&quot;){    \r\n    if(startX &lt; curX){\r\n      $(&quot;#txt&quot;).text(&quot;\u53f3\u306b\u30d5\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\u3002&quot;);\r\n    }else if(startX &gt; curX){\r\n      $(&quot;#txt&quot;).text(&quot;\u5de6\u306b\u30d5\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\u3002&quot;);\r\n    }   \r\n    }\r\n}<\/pre>\n<p>\u3056\u3063\u3068\u5909\u66f4\u3057\u305f\u7b87\u6240\u3092\u8aac\u660e\u3002<\/p>\n<p><strong>&#8220;touchstart&#8221;\u30a4\u30d9\u30f3\u30c8<\/strong>\u304c\u5b9f\u884c\u3055\u308c\u305f\u3068\u304d\u3001<strong>\u5909\u6570\u300cstartX\u300d<\/strong>\u306b\u30bf\u30c3\u30c1\u306e\u59cb\u307e\u308a\u306e\u5ea7\u6a19\u3092\u4ee3\u5165\u3002<\/p>\n<p><strong>&#8220;touchmove&#8221;\u30a4\u30d9\u30f3\u30c8<\/strong>\u304c\u5b9f\u884c\u3055\u308c\u305f\u3068\u304d\u3001<strong>\u5909\u6570\u300ccurX\u300d<\/strong>\u306b\u73fe\u5728\u306e\u5ea7\u6a19\u3092\u4ee3\u5165\u3002<\/p>\n<p><strong>&#8220;touchend&#8221;\u30a4\u30d9\u30f3\u30c8<\/strong>\u304c\u5b9f\u884c\u3055\u308c\u305f\u3068\u304d\u3001<strong>\u300cstartX\u300d\u3068\u300ccurX\u300d\u306e\u5ea7\u6a19\u3092\u6bd4\u8f03<\/strong>\u3057\u3001\u7d42\u4e86\u6642\u306e\u5ea7\u6a19\u304c\u5927\u304d\u3051\u308c\u3070\u300c\u53f3\u306b\u30d5\u30ea\u30c3\u30af\u300d\u3001\u7d42\u4e86\u6642\u306e\u5ea7\u6a19\u304c\u5c0f\u3055\u3051\u308c\u3070\u300c\u5de6\u306b\u30d5\u30ea\u30c3\u30af\u300d\u3068\u5224\u5225\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u307e\u307e\u3001\u30c6\u30ad\u30b9\u30c8\u3068\u3057\u3066\u51fa\u529b\u3002\u3067\u306f\u78ba\u8a8d\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/flick005.png\" title=\"flick005\" width=\"311\" height=\"466\" class=\"alignnone  wp-image-3131\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/flick005.png 640w, https:\/\/www.webcyou.com\/wp-content\/uploads\/flick005-200x300.png 200w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/p>\n<p>\u826f\u3044\u611f\u3058\u3002<\/p>\n<p>\u78ba\u8a8d\u306f\u4ee5\u4e0b\u306e\u30da\u30fc\u30b8\u3067\u51fa\u6765\u307e\u3059\u3002\uff08\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n<p><strong>\u78ba\u8a8d\u30da\u30fc\u30b8<\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/flick\/flick005.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/flick\/flick005.html<\/a><\/p>\n<p>\u7e26\u306e\u5834\u5408\u306fpageY\u3092\u4f7f\u7528\u3059\u308c\u3070OK! \u6ce8\u610f\u70b9\u306f\u7d42\u4e86\u5ea7\u6a19\u304c\u5927\u304d\u3044\u5834\u5408\u306f\u300c\u4e0b\u300d\u3001\u7d42\u4e86\u5ea7\u6a19\u304c\u5c0f\u3055\u3044\u5834\u5408\u306f\u300c\u4e0a\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<h4>CSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 \u30d5\u30ea\u30c3\u30af\u306b\u3088\u308b\u30dc\u30fc\u30eb\u6295\u3052<\/h4>\n<p>\u305d\u308c\u3067\u306f\u3001CSS3\u3092\u4f7f\u3044\u30dc\u30fc\u30eb\u3092\u653e\u308a\u6295\u3052\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>CSS\u3067\u5186\u5f62\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p><strong>CSS<\/strong><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">#touchBox{\r\nposition:absolute;\r\nbottom:10px;\r\nborder:#999999 1px solid;\r\n-webkit-border-radius:40px;\r\nheight:80px; \r\nwidth:80px;\r\nbackground:#666;\r\n}<\/pre>\n<p>\u5927\u304d\u3055\u3001\u8272\u7b49\u306f\u3059\u3079\u3066\u4efb\u610f\u3067\u3002<strong>position:absolute;\u3067\u52d5\u304b\u3057\u307e\u3059\u306e\u3067<\/strong>\u3053\u3061\u3089\u306f\u5fc5\u9808\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u66f4\u306b\u3001\u30d5\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u3001\u30af\u30e9\u30b9\u300con\u300d\u3092\u8ffd\u52a0\u3057\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3055\u305b\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u6642\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u5b9a\u3092css3\u3067\u8a2d\u5b9a\u3002<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">#touchBox.on{\r\n-webkit-animation: effect 1s 1 ease-in;\r\n}\r\n@-webkit-keyframes effect{\r\n  0%{bottom:10px;}\r\n  45%{bottom:220px;}\r\n  50%{bottom:230px;}\r\n  55%{bottom:220px;}\r\n  100%{bottom:10px;}\r\n}<\/pre>\n<p>\u4e0a\u306b\u653e\u308a\u6295\u3052\u3066\u843d\u3061\u3066\u304f\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002\uff08\u7c21\u6613\u306a\u306e\u3067\u8a31\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n<p>\u3067\u306f\u3001\u30d5\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u306e\u7528\u610f\u3002<\/p>\n<p><strong>JavaScript<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">function touchHandler(e){\r\n  e.preventDefault();\r\n  var touch = e.touches&#x5B;0];\r\n  $('#touchBox').removeClass('on');\r\n  if(e.type == &quot;touchstart&quot;){\r\n    startY = touch.pageY;\r\n    }\r\n  if(e.type == &quot;touchmove&quot;){\r\n    curY = touch.pageY;\r\n    }\r\n  if(e.type == &quot;touchend&quot;){\r\n    if(startY &lt; curY){\r\n      $(&quot;#txt&quot;).text(&quot;\u4e0b\u3078\u306f\u6295\u3052\u308c\u307e\u305b\u3093\u3002&quot;);\r\n    }else if(startY &gt; curY){\r\n      $('#touchBox').addClass('on');\r\n    }    \r\n    }\r\n}<\/pre>\n<\/p>\n<p>\u3061\u3087\u3053\u3063\u3068\u6271\u3063\u305f\u7a0b\u5ea6\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>pageX\u3060\u3063\u305f\u306e\u3092pageY\u306b\u5909\u66f4\u3002\uff08\u7d42\u4e86\u5ea7\u6a19\u304c\u5927\u304d\u3044\u5834\u5408\u306f\u300c\u4e0b\u300d\u3068\u306a\u308b\u306e\u3067\u6ce8\u610f\u3002)<\/p>\n<p><strong>$(&#8216;#touchBox&#8217;).removeClass(&#8216;on&#8217;);<\/strong>\u3067<\/p>\n<p>touchHandler\u304c\u5b9f\u884c\u3055\u308c\u305f\u6642\u3001\u4e00\u65e6\u30dc\u30fc\u30eb\u306b\u4ed8\u4e0e\u3055\u308c\u305f\u30af\u30e9\u30b9\u300con\u300d\u3092\u524a\u9664\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p><strong>$(&#8216;#touchBox&#8217;).addClass(&#8216;on&#8217;);<\/strong>\u3067<\/p>\n<p>\u4e0a\u306b\u30d5\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u3001\u30dc\u30fc\u30eb\uff08#tochBox\uff09\u306b\u30af\u30e9\u30b9\u300con\u300d\u3092\u4ed8\u4e0e\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u3050\u3089\u3044\u3067\u3059\u3002w \u3067\u306f\u78ba\u8a8d\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/flick006.png\" title=\"flick006\" width=\"311\" height=\"466\" class=\"alignnone  wp-image-3132\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/flick006.png 640w, https:\/\/www.webcyou.com\/wp-content\/uploads\/flick006-200x300.png 200w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/p>\n<p>\u308f\u30fc\u3002\u3044\u3044\u3067\u3059\u306dw<\/p>\n<p>\u78ba\u8a8d\u306f\u4ee5\u4e0b\u306e\u30da\u30fc\u30b8\u3067\u51fa\u6765\u307e\u3059\u3002\uff08\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n<p><strong>\u78ba\u8a8d\u30da\u30fc\u30b8<\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/flick\/flick006.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/flick\/flick006.html<\/a><\/p>\n<p>\u6b21\u56de\u306f\u69d8\u3005\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u306e \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3 JavaScript \u30bf\u30c3\u30c1\u3001\u30d5\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u5b9f\u88c5 \u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002 \u4eca\u56de\u306f\u3001\u30d5\u30ea\u30c3\u30af\u306e\u5224\u5b9a\u3001CSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u30d5\u30ea\u30c3\u30af\u5224\u5b9a\u306b\u3088\u3063\u3066\u30dc\u30fc\u30eb\u3092\u98db\u3070\u3059\u3002\u306e2\u70b9\u3092\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002 \u3067\u306f\u3001 \u30bf\u30c3\u30c1\u3001 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[73,172,171,167,177,166,37,47,179,95,178,71],"class_list":["post-3130","post","type-post","status-publish","format-standard","hentry","category-32","tag-actiinscript2-0","tag-actionscript","tag-android","tag-css","tag-css3","tag-iphone","tag-iphone-","tag-javascript-2","tag-jquery","tag-95","tag-178","tag-71"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/3130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3130"}],"version-history":[{"count":3,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/3130\/revisions"}],"predecessor-version":[{"id":3134,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/3130\/revisions\/3134"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}