jQuery 練習 - 自動縮放 Silder

Demo

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

Introduction 介紹

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

可以前後切換圖片

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

功能

基礎的 HTML 架構

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

1
2
3
4
5
6
7
8
9
10
<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 軸的參數,初始值我們要使畫面呈現預設的長方形

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

1
2
3
4
5
6
7
8
9
10
#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%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$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 會使我們設定的背景顏色顯示出來。

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

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

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

設定延遲效果

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

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

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :