パラパラ漫画にロゴを入れてみた。

2022-04-23
2022-04-24
JavaScript
85view

JavaScript パラパラ漫画にロゴを入れてみた。

コードは以下になります。



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <link href="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-ui.css" rel="stylesheet">
  <script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-min.js"></script>
  <script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-ui.js"></script>
  <script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery.ui.touch-punch.min.js"></script>
<style>
  :root {
    --pxw:500px;/*投稿する画像のPXの幅*/
    --pxh:400px;/*投稿する画像のPXの高さ*/
  }
  .img-frame{
    /*background-color: #E4EADC;*/
    border:solid 1px;
    width:var(--pxw);/*投稿する画像のPXに合わせる*/
    height:var(--pxh);/*投稿する画像のPXに合わせる*/
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position:relative;
  }
  .bottom-right {
    position: absolute;
    bottom: 25px;
    right: 25px;
  }

.dslider{
  color:blue;
  width:var(--pxw);/*投稿する画像のPXに合わせる*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.ui-widget {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1.5em;
}

.bu{
  width:var(--pxw);/*投稿する画像のPXに合わせる*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width:480px){
  .img-frame{
    width: 100%;
    height: 100%;
  }
  .dslider{
    width: 100%;
  }
  .bu{
    width:100%;
  }
}
#moveOn{
  margin-right:0.4em;
  width:3em;
  height: 2.8em;
}
#Return{
  margin-right:0.4em;
  width:3em;
  height: 2.8em;
}
#autoPlay{
  margin-right:0.4em;
  width:4em;
  height: 2.8em;
}
#zoom{
  margin-right:0.4em;
  width:3em;
  height: 2.8em;
}
#zoomout{
  margin-right:0.4em;
  width:3em;
  height: 2.8em;
}
</style>
</head>

<body>
　<div class="img-frame">
  <img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/04/test1.png"/>
  <a class="bottom-right" href="https://lifeinfo-navi.com/"><img src="https://lifeinfo-navi.com/wp-content/uploads/2022/04/ロゴ-160-×-40-px-130-×-40-px.png" target="_blank"></a>
  </div>
  <p ></p>
  <div class="dslider">
  <div id="slider"></div>
  </div> 
  <p></p>
  <div class="bu">
  <button id="moveOn">▶</button>
  <button id="Return">◀</button>
  <button id="autoPlay">再生</button>
  <button id="zoom">＋</button>
  <button id="zoomout">－</button>


  </div>
  <p></p>

  <script type="text/javascript">
    var index = 1;
    const image = "https://lifeinfo-navi.com/wp-content/uploads/2022/04/test";
    //let index = 1;
    // img要素を取得する
    //var img = document.getElementById("imagePlace");
    let img = document.getElementById("imagePlace");
    var maximg = 5;//画像の枚数

    //  moveOnの設定
    document.getElementById("moveOn").onclick = function(){
      index++;
      $( "#slider" ).slider( "value", index );
      if(index>maximg){     //画像の枚数を指定する。
        index=1
        $( "#slider" ).slider( "value", index );
      }
      img.src = image + index + ".png";
    }

    //  Returnの設定
    document.getElementById("Return").onclick = function(){
      index--;
      $( "#slider" ).slider( "value", index );
      if(index<1){     //画像の枚数を指定する。
        index=maximg;
        $( "#slider" ).slider( "value", index );
      }
      img.src = image + index + ".png";
    }

    document.getElementById("autoPlay").onclick = function(){
    switch(document.getElementById("autoPlay").innerHTML){
      case "再生" :
      document.getElementById("autoPlay").innerHTML = "停止";
      intervalID = setInterval(function(){
        index++;
        $( "#slider" ).slider( "value", index );
        if(index>maximg){     //画像の枚数を指定する。
          index=1
          $( "#slider" ).slider( "value", index );
        };
      img.src = image + index + ".png";
       },1000)
      break;
      case "停止":
      clearInterval(intervalID);
      document.getElementById("autoPlay").innerHTML = "再生";
      break; 
    };
  }
//マウスのホイールによるパラパラ
  document.getElementById("imagePlace").addEventListener("wheel",wheelpa,{passive:false});
  function wheelpa(event){
    event.preventDefault();
    if (event.wheelDelta == -120){
      console.log("手前")
      index++;
      $( "#slider" ).slider( "value", index );
      if(index>maximg){     //画像の枚数を指定する。
        index=1
        $( "#slider" ).slider( "value", index );
      }
      img.src = image + index + ".png";
    }
    if (event.wheelDelta == 120){
      console.log("おく")
      index--;
      $( "#slider" ).slider( "value", index );
      if(index<1){     //画像の枚数を指定する。
        index=maximg
        $( "#slider" ).slider( "value", index );
      }
      img.src = image + index + ".png";
    }
  }

      //スライダー #jquery UI
      $(function() {
        let img = document.getElementById("imagePlace");
    $('#slider').slider({
      min: 1,
      max: maximg,
      step: 1,
      value: 1,
      
      slide: function(event, ui) {
        index = ui.value;
        img.src = image + index + ".png";
        }
    });
  });
      //画像移動#jquery UI 
      $( function() {
        let img = document.getElementById("imagePlace");
        $( "#imagePlace" ).draggable();
      } );
//画像拡大と縮小
      var x = 1 ;
    document.getElementById("zoom").onclick = function(){
        console.log('afdaf')
        x = x + 0.2;
        if(x<1){
          x = 1.2;
        }
        document.getElementById("imagePlace").style.transform = "scale(" + x + "," + x + ")";
    }
    document.getElementById("zoomout").onclick = function(){
        x = x - 0.2;
        if(x<1){
          x = 1;
          console.log("111")
        }
        document.getElementById("imagePlace").style.transform = "scale(" + x + "," + x + ")";

    }


  </script>
</body>
</html>

ツイートもチェックしよう！

フォローする