質問編集履歴

htmlとjsを追加しました。

2017/10/05 01:10

投稿

takane

スコア63

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -21,3 +21,667 @@
 何かよ方法はないでしょうか？
+---追加--
+すみません。
+全体のコードを記載いたします。
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>ADOBEヘルプ</title>
+    <style>
+    body{
+      padding: 0;
+      margin: 0;
+    }
+      h1{
+        text-align: center;
+      }
+      h2{
+        margin: 0;
+        padding: 0;
+      }
+      .explain{background-color: #000}
+      li{
+        list-style: none;
+      }
+      .mark {
+        height: 330px;
+      }
+      .window{
+      width: 200px;
+      margin: 0 auto;
+      overflow: hidden;
+      }
+      #aplication{
+        display: flex;
+        padding: 0;
+      }
+      #aplication li {
+        margin-left: 20px;
+      }
+      #aplication li:first-child{
+        margin-left: -440px;
+      }
+      #aplication li img{
+        width: 200px;
+        height:200px;
+      }
+      #back img,#next img{
+        margin: 50% 0;
+      }
+      .slide{
+        display: flex;
+      }
+      .next{
+        transition: .8s;
+        transform: translateX(-220px);
+      }
+      .back{
+        transition: .8s;
+        transform: translateX(220px);
+      }
+      .explain{
+        padding: 30px;
+        box-sizing: border-box;
+      }
+      .explain_tab{
+        background-color: #fff;
+        border-radius: 10px;
+        padding: 15px;
+        box-sizing: border-box;
+        display: none;
+        transition: .4s;
+      }
+      .explain_tab h2{
+        text-align: center;
+      }
+      .explain_tab.active{
+        opacity: 0;
+        display: block;
+      }
+      .explain_tab.sol{
+        opacity: 1;
+        transition: .4s;
+      }
+      .explain_tab.op{
+        transition: .4s;
+        opacity: 0;
+      }
+      /*--説明部分--*/
+      .explain_tab ul {
+        margin-top: 30px;
+        padding: 0;
+      }
+      .explain_tab h2{
+        margin-top: 20px;
+      }
+      .button{
+        margin-bottom: 0px;
+        font-size: 18px;
+        font-weight: bold;
+        text-align: center;
+        padding: 0;
+        background-color: #ddd;
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px #000 solid;
+        box-sizing: border-box;
+        text-decoration:underline;
+      }
+      .explain_contents{
+        padding: 20px 50px 0;
+      }
+      .explain_contents.active{
+      }
+      .ac{
+        height: 59px;
+        overflow:hidden;
+        transition: .8s;
+      }
+      .button:hover{
+        cursor: pointer;
+      }
+      .listMark li{
+        list-style: disc;
+      }
+      /*--説明部分end--*/
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="mark">
+        <h1>ADOBEヘルプ</h1>
+        <div class="slide" id="slide">
+          <div id="back">
+            <img src="images/back.png" alt="back">
+          </div>
+          <div id="middle">
+            <div class="window">
+              <ul id="aplication">
+              </ul>
+            </div>
+          </div>
+          <div id="next">
+            <img src="images/next.png" alt="next">
+          </div>
+        </div>
+      </div>
+    </main>
+    <script>
+    (function () {
+      var apli =
+      [
+      {'img':'images/ps_cc_app_RGB.svg','nunber':'tab_ps'},
+      {'img':'images/ai_cc_app_RGB.svg','nunber':'tab_ai'},
+      {'img':'images/Lr_cc_app_noshadow_RGB.svg','nunber':'tab_lr'},
+      {'img':'images/st_app_RGB.svg','nunber':'tab_st'},
+      {'img':'images/id_cc_app_RGB.svg','nunber':'tab_id'}
+      ];
+      var aplication = document.getElementById('aplication');
+      var box = [];//変数の並びをかえるための一時格納ボックス
+      var currentApli;//現在選択されているアプリケーションを記載しておく
+      var sw = false;
+      //アプリ画像をドラッグした時の挙動
+      var touchList = aplication.getElementsByTagName('li');
+      console.log(touchList);
+      for (var i = 0; i < touchList.length; i++) {
+        touchList[i].getElementsByTagName('img');
+        touchList[i].addEventListener('mousedown',function () {
+          console.log('ok');
+        })
+      }
+      //変数に入れた画像データをリストに格納し表示
+            //スライド部分の配置をずらす（配列の先頭を出す）
+            for (var i = 0; i < 2; i++) {
+              box.push(apli.pop());
+              apli.unshift(box.shift());
+            }
+      for (var i = 0; i < 5; i++) {
+      var li = document.createElement("li");
+      var img = document.createElement("img");
+      li.dataset.id = apli[i].nunber;
+      var imagebox = aplication.appendChild(li).appendChild(img);
+      imagebox.src = apli[i].img;
+      }
+      //スライド部分のwidth調整、explain部分の高さ調整
+      window.onresize = ws;
+      function ws() {
+       var w =  window.innerWidth;
+       document.getElementById('slide').style.width = w + "px";
+       document.getElementById('middle').style.width = w - 200 + "px";
+       var h = window.innerHeight;
+       document.getElementsByClassName('explain')[0].style.minHeight = h - 360 + 'px';
+     }
+     ws();
+     //スライド用
+     document.getElementById('next').addEventListener('click',function functionName() {
+       if (sw === false) {
+         next();
+         changeTab();
+       }else if (sw = true) {
+         return;
+       }
+     });
+     document.getElementById('back').addEventListener('click',function functionName() {
+       if (sw === false) {
+         back();
+         changeTab();
+       }else if (sw = true) {
+         return;
+       }
+     });
+     function changeTab() {
+       var deleteTab = document.getElementsByClassName('explain_tab');
+       for (var i = 0; i < deleteTab.length; i++) {
+         if (deleteTab[i].className === 'sol active explain_tab') {
+           deleteTab[i].className = 'op active explain_tab';
+         }
+       };
+       setTimeout(function () {
+         for (var i = 0; i < deleteTab.length; i++) {
+           deleteTab[i].className = 'op explain_tab';
+           document.getElementById(currentApli).className = 'op active explain_tab';
+         };
+         setTimeout(function () {
+           document.getElementById(currentApli).className = 'sol active explain_tab';
+         }, 5);
+       }, 395);
+     };
+     function next() {
+      sw = true;
+      aplication.className = 'next';
+      box.push(apli.shift());
+      apli.push(box.shift());
+      currentApli = apli[2].nunber;
+      setTimeout(function () {
+        while (aplication.firstChild) {
+          aplication.removeChild(aplication.firstChild);
+        };
+        aplication.className = '';
+        for (var i = 0; i < 5; i++) {
+        var li = document.createElement("li");
+        var img = document.createElement("img");
+          var imagebox = aplication.appendChild(li).appendChild(img);
+          imagebox.src = apli[i].img;
+        }
+        sw = false;
+      }, 800);
+      initButton();
+     };
+     function back() {
+       sw = true;
+       aplication.className = 'back';
+       box.push(apli.pop());
+       apli.unshift(box.shift());
+       currentApli = apli[2].nunber;
+       setTimeout(function () {
+         while (aplication.firstChild) {
+           aplication.removeChild(aplication.firstChild);
+         };
+         aplication.className = '';
+         for (var i = 0; i < 5; i++) {
+         var li = document.createElement("li");
+         var img = document.createElement("img");
+           var imagebox = aplication.appendChild(li).appendChild(img);
+           imagebox.src = apli[i].img;
+         }
+         sw = false;
+       }, 800);
+       initButton();
+     };
+     var buttonL = document.getElementsByClassName('button');
+     var cont = document.getElementsByClassName('explain_contents');
+     var ac = document.getElementsByClassName('ac');
+     var acSw = [] ;//アコーディオン開閉のスイッチ
+     for (var i = 0; i < buttonL.length; i++) {
+       acSw.push(false);
+       clickButton(i);
+     }
+     function clickButton(n) {
+       buttonL[n].addEventListener('click',function () {
+         if (acSw[n] === false) {
+           var contH = cont[n].clientHeight;
+           var acH = ac[n].clientHeight;
+           ac[n].style.height = acH + contH + 'px';
+           acSw[n] = true;
+         }else if (acSw[n] === true) {
+           ac[n].style.height = '59px';
+           acSw[n] = false;
+         }
+       })
+     };
+     function initButton() {
+       for (var i = 0; i < buttonL.length; i++) {
+         ac[i].style.height = '59px';
+         acSw[i] = false;
+       };
+     };
+    })();
+    </script>
+  </body>
+</html>
+```