<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:100px;
height:400px;
margin:0 auto;
background: rosybrown;
position: relative;
}
#boxchild{
width:100px;
height:100px;
line-height: 100px;
background: red;
text-align: center;
position: absolute;
top:300px;
}
p{
width:100px;
height:100px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
span{
width:20px;
height:20px;
cursor: pointer;
line-height: 20px;
text-align: center;
background: yellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box">
<div id="boxchild">
<p>
<span onclick="change()">1</span>
<span onclick="change()">2</span>
<span onclick="change()">3</span>
<span onclick="change()">4</span>
</p>
</div>
</div>
<script type="text/javascript">
var spanNode = document.getElementsByTagName("span");
var divNode = document.getElementById("boxchild");
for (var i = 0; i < spanNode.length; i++) {
spanNode[i].onclick = function () {
var index = this.innerText;
change(index);
}
}
function change(index) {
var t = 300-(index-1)*100;
divNode.style.top= t + "px";
}
</script>
</body>
</html>
应该是可以做成立体的