{"id":1348,"date":"2021-01-02T01:52:03","date_gmt":"2021-01-01T16:52:03","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=1348"},"modified":"2021-01-02T04:11:50","modified_gmt":"2021-01-01T19:11:50","slug":"94-css%e3%81%a8javascript%e3%81%a7%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/94-css%e3%81%a8javascript%e3%81%a7%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b%e3%80%82\/","title":{"rendered":"(94) CSS\u3068JavaScript\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u4f5c\u308b\u3002"},"content":{"rendered":"

1. \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

CSS\u3068 JavaScript\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\uff08\uff1d\u697d\u3092\u3057\u3066\uff09\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u5b9f\u73fe\u3057\u305f\u3044\u3002<\/p>\n

2. \u3084\u3063\u3066\u307f\u308b<\/h1>\n

0) \u5b9f\u88c5\u65b9\u91dd<\/h2>\n

\u4ee5\u4e0b\u306e\u65b9\u91dd\u3067\u305d\u308c\u305e\u308c\u306b\u51e6\u7406\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

CSS<\/span> : \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3084\u30b9\u30e9\u30a4\u30c9\u306a\u3069\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5236\u5fa1\u3092\u8a18\u8ff0\u3059\u308b\u3002
\nJavaScript<\/span> : \u4e00\u5b9a\u5468\u671f\u3067\u306e\u30af\u30e9\u30b9\u306e\u8ffd\u52a0\u30fb\u524a\u9664\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

1) \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8<\/h2>\n

style_1.css<\/span><\/p>\n

\r\nul{\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\nul li.slide{\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  display: block;\r\n  opacity: 0;\r\n}\r\nul li.dummy{  \/* \u753b\u50cf\u306e\u9ad8\u3055\u3092\u5f97\u308b\u305f\u3081\u306e\u30c0\u30df\u30fc\u8868\u793a\u7269 *\/\r\n  opacity: 0;\r\n}\r\n.anim{\r\n  animation-name: kf_anim;\r\n  animation-duration: 2s;\r\n  animation-timing-function: linear;\r\n  animation-iteration-count: 1;\r\n  animation-fill-mode: forwards;\r\n}\r\n@keyframes kf_anim {\r\n    0%{ opacity: 1; }\r\n  100%{ opacity: 0; }\r\n}\r\n<\/pre>\n
script.css<\/span><\/p>\n
\r\n$(function(){\r\n  var to_time = 4000;\r\n  var anim_time = 2000;\r\n  var ary_li = $('ul li.slide');\r\n  var max_idx = ary_li.length - 1;\r\n  var act_idx = 0;\r\n  \/\/ \u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u6642\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\r\n  function callbackTOAnim(){\r\n    anim_img();\r\n  };\r\n  \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5236\u5fa1\u95a2\u6570\r\n  function anim_img(){\r\n    \/\/ \u6d88\u53bb\u3059\u308b\u753b\u50cf\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\r\n    ary_li.eq(act_idx).css('z-index','1');\r\n    ary_li.eq(act_idx).addClass('anim');\r\n    \/\/ \u6b21\u306b\u8868\u793a\u3059\u308b\u753b\u50cf\u306e\u756a\u53f7\u3092\u6c7a\u5b9a\r\n    act_idx = act_idx + 1;\r\n    if(act_idx > max_idx){\r\n      act_idx = 0;\r\n    }\r\n    \/\/ \u6b21\u306b\u8868\u793a\u3059\u308b\u753b\u50cf\u3092\u53ef\u8996\u5316\r\n    ary_li.eq(act_idx).css('z-index','0');\r\n    ary_li.eq(act_idx).css('opacity','1');\r\n    ary_li.eq(act_idx).removeClass('anim');\r\n    \/\/ \u8868\u793a\r\n    setTimeout(callbackTOAnim, to_time);\r\n  };\r\n  \/\/ \u4ee5\u4e0b\u3001\u30da\u30fc\u30b8\u8868\u793a\u306e\u521d\u56de\u3060\u3051\u5b9f\u884c\r\n  ary_li.eq(act_idx).css('z-index','1');\r\n  ary_li.eq(act_idx).css('opacity','1');\r\n  \/\/ \u8868\u793a\r\n  setTimeout(callbackTOAnim, to_time - anim_time);\r\n});\r\n<\/pre>\n
demo1.html<\/span><\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="ja">\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>00094 demo1<\/title>\r\n<link rel="stylesheet" href=".\/style_1.css" \/>\r\n<script src="https:\/\/code.jquery.com\/jquery-3.3.1.min.js"><\/script>\r\n<script src=".\/script.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <ul>\r\n    <li class="dummy"><img src=".\/IMG_1442.JPG"><\/li>\r\n    <li class="slide"><img src=".\/IMG_1442.JPG"><\/li>\r\n    <li class="slide"><img src=".\/IMG_1456.JPG"><\/li>\r\n    <li class="slide"><img src=".\/IMG_1467.JPG"><\/li>\r\n    <li class="slide"><img src=".\/IMG_1494.JPG"><\/li>\r\n    <li class="slide"><img src=".\/IMG_1509.JPG"><\/li>\r\n  <\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
http:\/\/www.dogrow.net\/hp\/sample\/00094\/demo1.html<\/a><\/p>\n
2) \u30b9\u30e9\u30a4\u30c9<\/h2>\n
\u4e0a\u8a18\u306e\u300c1) \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u300d\u3068\u306e\u5dee\u306f @keyframes<\/span> \u306e\u5b9a\u7fa9\u306e\u307f\u3002<\/p>\n
\r\n@keyframes kf_anim {\r\n    0%{ left: 0; }\r\n  100%{ left: -100%; }\r\n}\r\n<\/pre>\n
http:\/\/www.dogrow.net\/hp\/sample\/00094\/demo2.html<\/a><\/p>\n
3. \u6240\u611f<\/h1>\n
\u30fb\u3059\u3079\u3066\u3092 JavaScript\u3067\u66f8\u304f\u3088\u308a\u3082\u3060\u3044\u3076\u697d\u3060\u306a\u3041\u3068\u601d\u3046\u304c…<\/p>\n
\n","protected":false},"excerpt":{"rendered":"
1. \u3084\u308a\u305f\u3044\u3053\u3068 CSS\u3068 JavaScript\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\uff08\uff1d\u697d\u3092\u3057\u3066\uff09\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u5b9f\u73fe\u3057\u305f\u3044\u3002 2. \u3084\u3063\u3066\u307f\u308b 0) \u5b9f\u88c5\u65b9\u91dd \u4ee5\u4e0b\u306e\u65b9\u91dd\u3067\u305d\u308c\u305e\u308c\u306b\u51e6\u7406\u3092\u8a18\u8ff0\u3059\u308b\u3002 CSS : \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3084\u30b9\u30e9\u30a4\u30c9\u306a\u2026 \u7d9a\u304d\u3092\u8aad\u3080 »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1348","post","type-post","status-publish","format-standard","hentry","category-javascriptjquery"],"views":2043,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=1348"}],"version-history":[{"count":17,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1348\/revisions"}],"predecessor-version":[{"id":1393,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1348\/revisions\/1393"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=1348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=1348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=1348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}