css实现列表局部放大和压缩效果
2019-10-09 本文已影响0人
GX_路
不废话先看效果
1111.gif
代码分析
布局和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>
