jQuery 練習 - 自動縮放 Silder

Demo

jQuery 練習 - jQuery 自動縮放 Silder - Demo

Introduction 介紹

對 jQuery 有初步認識後，從網上找了 Silder 專案來練習。

可以前後切換圖片

切換拾畫面會變形，並且在固定時間內縮放

功能

基礎的 HTML 架構

有圖片區塊與前後切換按鍵

<div id="main">
       <div id="silder">
           <img src="./img/bg1.jpg" height="100%" width="100%">
           <img src="./img/bg2.jpg" height="100%" width="100%">
           <img src="./img/bg3.jpg" height="100%" width="100%">
       </div>
   </div>

   <div id="prvbtn">&#8592</div>
   <div id="nxtbtn">&#8594</div>

設定繪製畫面變形的 clip-path

並且要在 CSS 設定一個繪製畫面變形最重要的關鍵 clip-path，是利用遮罩剪裁的方式，使 div 可以多邊型變化，可以產生不同的形狀，顯示底圖或底色。 因為要產生五角形的畫面變化，因此需要有五個座標參數，每個點的都包括橫向 X 軸與垂直 Y 軸的參數，初始值我們要使畫面呈現預設的長方形

每個點的參數與對應關係可參考這個網站

#main {
  height: 100vh;
  width: 100%;
  position: absolute;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

使用 animate() 產生畫面滑動

首先設定點擊前後切換的按鍵的 function，會使用 animate() 方法產生動畫效果，使三張圖片圖片負向向左方移動。因為我們設定每個影像都佔據畫面 33.33%，因此如果是第一張圖片要切換到第二張，則現在畫面中的圖片往左負向移動 100%，如果是第二張要切換到第三張，則第一張跟第二張圖片，總共要向左負向移動 200%。如果要從第三張切換回第二張，則往左負向移動的百分比切換為 -100%。

$count = 1;
$("#nxtbtn").click(function() {
  if ($count == 1) {
    $("#silder").animate({
      left: "-100%"
    });
    $count = 2;
  } else if ($count == 2) {
    $("#silder").animate({
      left: "-200%"
    });

    $count = 3;
  }
});

$("#prvbtn").click(function() {
  if ($count == 3) {
    $("#silder").animate({
      left: "-100%"
    });
    $count = 2;
  } else if ($count == 2) {
    $("#silder").animate({
      left: "0%"
    });
    $count = 1;
  }
});

變形效果

接下來是變形的效果，由於

搭配 setTimeout 設定延遲以單位毫秒執行指定的程式碼。clip-path 會使我們設定的背景顏色顯示出來。

setTimeout(function() {
  $("#main").css({
    "-webkit-clip-path": "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)"
  });
}, 150);

最後是縮放的效果一樣使用 setTimeout

setTimeout(function() {
  $("#main").css({
    "-webkit-clip-path": "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)"
  });
}, 150);

設定延遲效果

回到切換按鈕的 function 設定延遲效果

$(document).ready(function () {
    $pic = 1;
    $("#nxtbtn").click(function () {
        if ($pic == 1) {
            shrink();
            $('#silder').delay(1000).animate({