|
→→推薦一套B站新鮮出爐的web前端教程←←
看到手機相冊，突發(fā)奇想：能不能用實現(xiàn)一個原生的頁面“相冊”？或者說，傳統(tǒng)網(wǎng)頁中怎么實現(xiàn)圖片預(yù)覽功能？
如果在原生網(wǎng)頁中使用插件，那必不可少的要引入一堆東西（并不是鄙視插件，只是為了引入下文，見諒嘿嘿）；但又不是說所有的頁面都要用框架…
經(jīng)過一番探索，終于大概實現(xiàn)了想要的功能：
大概流程就是：可以點開大圖觀看、可以左右滑動切換、進(jìn)入預(yù)覽時可以從你當(dāng)前點擊的那一張開始瀏覽。
實現(xiàn)相冊初始展示頁
如上所示，我們可以在Header頭中添加Viewport配置 —— 移動端頁面常備：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后在Body元素中添加小相片列表，其HTML如下：
<div class="gallery">
<div class="item">
<img src="images/39.jpg" alt="1">
</div>
<div class="item">
<img src="images/download.png" alt="2">
</div>
<div class="item">
<img src="images/nan.png" alt="3">
</div>
<div class="item">
<img src="images/nan2.png" alt="4">
</div>
<div class="item">
<img src="images/timg.jpg" alt="5">
</div>
</div>
現(xiàn)在頁面上是一張張大小不一的圖片凌亂排列，然后我們給它添加樣式：
.gallery{
/* 設(shè)置設(shè)置相冊的寬度為屏幕寬度 */
width:100vw;
/* 相冊采用flex布局 */
display: flex;
/* 相冊每一項為橫向排列，并且換行 */
flex-flow: row wrap;
}
.gallery .item{
/* 每一項平均排列 */
/* flex: 1; */
/* 圖片寬度設(shè)置為1/3屏幕寬度 */
width:calc(100vw / 3);
overflow: hidden;
}
.gallery .item img{
width: 100%;
height: 100%;
}
熟悉筆者的都知道：筆者提倡“盡可能的使用CSS去解決問題！”。所以：我們這里就要考慮這樣一個問題：預(yù)覽時頁面的排布和原來有什么不同之處？
我的思路是：開始時總的寬度是100vw，子元素（相冊圖片）以flex排列；點擊某一個圖片預(yù)覽時動態(tài)給父元素添加一個類名，這個類的作用是：將父元素下（單張）圖片的最大寬度設(shè)為100vw（子元素從始至終都不設(shè)寬）。然后在js中根據(jù)子元素的長度計算其“真正寬度”（.style.width）。并根據(jù)當(dāng)前點擊的是第幾個子元素計算應(yīng)該transform偏移多少距離：
.gallery.preview{
background-color: gray;
}
/** 添加過渡效果 */
.gallery.animation{
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
transition: 1s ease;
}
.gallery.preview .item{
/* 對子項設(shè)置為flex布局 */
display: flex;
/* 設(shè)置margin為auto實現(xiàn)圖片居中顯示 */
margin: auto;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.gallery.preview .item img {
/* 設(shè)置預(yù)覽圖片的最大寬度為屏幕寬度 */
max-width: 100vw;
/* 設(shè)置預(yù)覽圖片的最大高度為屏幕高度 */
max-height: 100vh;
/* 初始化圖片寬高，覆蓋之前設(shè)置的寬高 */
width: initial;
height: initial;
}
根據(jù)上面的思路，在HTML頁面加入腳本，監(jiān)聽Click事件：用戶單擊相片時，將相冊切換為預(yù)覽模式：
var $gallery = document.querySelector(".gallery");
$gallery.addEventListener("click", function (e) {
// 監(jiān)聽單擊事件，切換相冊的CSS class來實現(xiàn)預(yù)覽和普通模式的切換
var classList = $gallery.classList,
css_preview = "preview";
if (classList.contains(css_preview)) {
classList.remove(css_preview)
// 在非預(yù)覽模式下，相冊的寬度為100vw
$gallery.style.width = 100 + "vw";
//【1】
} else {
classList.add(css_preview);
// 進(jìn)入在預(yù)覽模式，所有的圖片橫著拍成一排，相冊的總寬度為每一個項目長度總和。
$gallery.style.width = 100 * itemsLength + "vw";
//【2】
}
});
在預(yù)覽模式下，通過設(shè)置gallery樣式類元素的寬度，讓相冊圖片排成一排，然后通過CSS3的transform屬性，設(shè)置元素的偏移量，移動整個元素位置，使得需要展示的圖片出現(xiàn)在屏幕主區(qū)域。
在開始移動之前，我們要先禁止掉瀏覽器默認(rèn)的觸摸行為 —— 用CSS來做：
//為類“.gallery.preview”添加屬性
touch-action: none;
然后去監(jiān)聽touchstart、touchmove及touchend事件來實現(xiàn)手勢滑動功能
這三個事件很是常用，但其實他們的原理很簡單，總結(jié)來說就是：在start（剛按下）時記錄此時的手指位置——作為初始值；在move（觸摸滑動）時根據(jù)實時的手指位置和初始手指位置變量實現(xiàn)要求判斷；在end（手指離開）時（也有直接在move時進(jìn)行的）進(jìn)行收尾工作——比如：圖片滑動完全劃過去、元素跑到結(jié)束位置、將事件監(jiān)聽取消；
var isTtouchstart = false,
startOffsetX,
currentTranX = 0,
width = $gallery.offsetWidth,
$items = $gallery.querySelectorAll(".item"),
itemsLength = $items.length,
move = function (dx) {
$gallery.style.transform = "translate(" + dx + "px, 0)";
};
$gallery.addEventListener("touchstart", function (e) {
// 觸摸開始時，記住當(dāng)前手指的位置
startOffsetX = e.changedTouches[0].pageX;
//
$gallery.classList.remove("animation");
});
$gallery.addEventListener("touchmove", function (e) {
isTtouchstart = true;
// 計算手指的水平移動量
var dx = e.changedTouches[0].pageX - startOffsetX;
// 調(diào)用move方法，設(shè)置galley元素的transform，移動圖片
move(currentTranX + dx);
});
$gallery.addEventListener("touchend", function (e) {
if (isTtouchstart) {
// 在移動圖片的時候，需要動畫，動畫采用CSS3的transition實現(xiàn)。
$gallery.classList.add("animation");
// 計算偏移量
var dx = e.changedTouches[0].pageX - startOffsetX;
// 如果偏移量超出gallery寬度的一半
if (Math.abs(dx) > width / 2) {
// 處理臨界值
if (currentTranX <= 0 && currentTranX > -width * itemsLength) {
// 如果手指向右滑動
if (dx > 0) {
// 如果圖片不是顯示第一張
if (currentTranX < 0) {
currentTranX = currentTranX + width;
}
// 如果手指向右滑動，并且當(dāng)前圖片不是顯示最后一張
} else if (currentTranX > -width * (itemsLength - 1)) {
currentTranX = currentTranX - width;
}
}
}
// 如果未超出圖片寬度的一半，上述條件不會執(zhí)行，而這個時候，手指在移動的時候，圖片隨著手指移動了，通過下面的代碼，將圖片的位置還原
// 如果超出了圖片寬度的一半，將切換到上一張／下一張圖片
move(currentTranX);
}
isTtouchstart = false;
});
到此為止，基本功能是實現(xiàn)了，不過感覺少了點什么：
啊，知道了：點擊進(jìn)入預(yù)覽時始終是從第一張開始的，而且如果結(jié)束預(yù)覽時不是第一張它會消失！
這顯然是沒有做“變量恢復(fù)”：
//在上面代碼中【1】的位置添加：
currentTranX = 0;
$gallery.style.transform = "translate(0, 0)";
//在上面代碼【2】的位置添加：
for(let i in $items){
if($items[i]==e.target.parentNode){
currentTranX=-(+i)*width
move(currentTranX)
break
}
}
于是就出現(xiàn)了文章開頭所示效果！
這個小demo是結(jié)束了，但是有一點卻引起了我的關(guān)注：上面圖片排列時為了防止展示問題都是讓外層父容器指定寬高，然后給img元素一個寬高100%。
有沒有可能讓img固定寬高比呢？
能不能在所有外部寬高下都保持此寬高比呢？
padding-bottom實現(xiàn)比例固定圖片自適應(yīng)
calc() 和 background-size: cover; 都是個不錯的想法，但是往兼容性、清晰度和特殊情況一看就會壞菜——比如cover在縮到一定范圍時就會有部分遮蓋。
但是如果padding出馬，就像這樣：
<div class="banner">
<img src="./images/nan.png">
</div>
.banner {
padding-bottom: 60%;
position: relative;
}
.banner > img {
position: absolute;
width: 100%;
height: 100%;
left: 0; top: 0;
}
Look：如此絲滑！
可以看到，無論屏幕寬度多寬，圖片比例都是固定的——不會有任何剪裁，不會有任何區(qū)域缺失，布局就顯得非常有彈性，也更健壯。
對于這種圖片寬度100%容器，高度按比例的場景，padding-bottom的百分比值大小就是圖片元素的高寬比，就這么簡單。
重要的來了： 有時候圖片寬度并不是容器的100%，例如，圖片寬度50%容器寬度，圖片高寬比4:3，此時用padding-bottom來實現(xiàn)就顯得666了：
/**右50%表示寬度，下66.66%表示“高寬比4:3”**/
padding: 0 50% 66.66% 0;
object-fit實現(xiàn)圖片自適應(yīng)容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>寬高自適應(yīng)</title>
<style>
.img-container{
width:688px;
height:204px;
background: black;
}
.img-container img{
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="img-container">
<img src="images/download.png" alt="4">
</div>
</body>
</html>
object-fit 似乎一定程度上解決了width:100%帶來的一些圖片寬高比問題，又結(jié)合了background-size:cover 的固定寬高比伸縮，也是比較秀的了。
“圖片預(yù)覽”應(yīng)用場景下的js應(yīng)用
其實更多場景下，看的是“圖片完全、優(yōu)雅地展示出來”。這時候，其實可以用JavaScript動態(tài)計算圖片寬高：
- 容器寬高比例 > 圖片寬高比例：說明圖片比較高，以高度為準(zhǔn)，寬度適應(yīng)
- 容器寬高比例 < 圖片寬高比例：說明圖片比較寬，以寬度為準(zhǔn)，高度適應(yīng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div + div {
margin-top: 30px;
}
.img-container{
width:688px;
height:304px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: black;
}
.width {
width: 668px;
height: 404px;
}
</style>
</head>
<body>
<div class="img-container"></div>
<script>
const container = document.querySelector(".img-container")
container.classList.add("width")
const url = 'images/nan.png';
const img = document.createElement("img")
img.src = url;
img.onload=function(){
let {width,height} = getRealSize(container.offsetWidth,container.offsetHeight,img.width,img.height, 1)
img.width = width
img.height = height
}
container.appendChild(img)
/**
* [獲取自適應(yīng)圖片的寬高]
* @param {[number]} parentWidth [父容器寬]
* @param {[number]} parentHeight [父容器高]
* @param {[number]} imgWidth [圖片實際寬]
* @param {[number]} imgHeight [圖片時間高]
* @param {[number]} radio [撐開比例]
* @return {[Obejt]} [圖片真實寬高]
*/
function getRealSize(parentWidth, parentHeight, imgWidth, imgHeight, radio){
let real = {width:0,height:0}
let scaleC = parentWidth / parentHeight;
let scaleI = imgWidth / imgHeight;
if(scaleC > scaleI){ //說明圖片比較高 以高度為準(zhǔn)
real.height = radio * parentHeight;
real.width = parentHeight * scaleI;
}else if(scaleC < scaleI){ //說明圖片比較寬 以寬度為準(zhǔn)
real.width = radio * parentWidth;
real.height = parentWidth / scaleI;
}else{
real.width = radio * parentWidth;
real.height = parentWidth / scaleI;
}
return real
}
</script>
</body>
</html>
|
