不廢話先看效果
代碼分析
佈局和js代碼
<body>
<div class="content">
</div>
<template id="my-temp">
<div class="temp">
<div></div>
<div></div>
</div>
</template>
<script>
if('content' in document.createElement("template")){
let t = document.querySelector("#my-temp")
let c = t.content.querySelectorAll("div")[0]
let items = c.querySelectorAll("div")
let tb = document.querySelector(".content");
for(let i = 0;i < 10; i++ ){
items[0].textContent = i
items[1].textContent = '數據' + i
let clone = document.importNode(t.content, true);
tb.appendChild(clone)
}
}
</script>
</body>
css樣式
<style>
.content{
height: 500px;
display: flex;
margin: 100px;
flex-direction: column;
justify-content: space-between;
}
.temp{
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
transition-duration: .2s
}
.temp:hover{
padding: 3px;
transform: scale(1.3,1.3);
box-shadow: 3px 3px 10px rgba(162, 162, 162, 0.6)
}
</style>
放大效果主要是通過.temp:hover中的transform: scale(1.3,1.3);實現，不多解釋
看一下壓縮效果的實現方式
首先列表容器樣式.content
display: flex;
margin: 100px;
flex-direction: column;
justify-content: space-between;
列表容器設置了justify-content: space-between;樣式
在子項的hover樣式中調整padding，子項的高度變大，使列表容器的空白空間變小，所以其他子項會向上或向下移動，距離鼠標所在子項越近位移就越明顯，所以視覺上會有壓縮效果
完整代碼
<!DOCTYPE html>
<html lang="zh" >
<head>
<title>Template</title>
<style>
.content{
height: 500px;
display: flex;
margin: 100px;
flex-direction: column;
justify-content: space-between;
}
.temp{
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
transition-duration: .2s
}
.temp:hover{
padding: 3px;
transform: scale(1.3,1.3);
box-shadow: 3px 3px 10px rgba(162, 162, 162, 0.6)
}
</style>
</head>
<body>
<div class="content">
</div>
<template id="my-temp">
<div class="temp">
<div></div>
<div></div>
</div>
</template>
<script>
if('content' in document.createElement("template")){
let t = document.querySelector("#my-temp")
let c = t.content.querySelectorAll("div")[0]
let items = c.querySelectorAll("div")
let tb = document.querySelector(".content");
for(let i = 0;i < 10; i++ ){
items[0].textContent = i
items[1].textContent = '數據' + i
let clone = document.importNode(t.content, true);
tb.appendChild(clone)
}
}
</script>
</body>
</html>