1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 }
11 #box{
12 width:100px;
13 height:400px;
14 margin:0 auto;
15 background: rosybrown;
16 position: relative;
17 }
18 #boxchild{
19 width:100px;
20 height:100px;
21 line-height: 100px;
22 background: red;
23 text-align: center;
24 position: absolute;
25 top:300px;
26 }
27 p{
28 width:100px;
29 height:100px;
30 display: flex;
31 flex-direction: column;
32 justify-content: space-around;
33 align-items: center;
34 }
35 span{
36 width:20px;
37 height:20px;
38 cursor: pointer;
39 line-height: 20px;
40 text-align: center;
41 background: yellow;
42 border-radius: 50%;
43 }
44 </style>
45 </head>
46 <body>
47 <div id="box">
48 <div id="boxchild">
49 <p>
50 <span onclick="change()">1</span>
51 <span onclick="change()">2</span>
52 <span onclick="change()">3</span>
53 <span onclick="change()">4</span>
54 </p>
55 </div>
56 </div>
57 <script type="text/javascript">
58 var spanNode = document.getElementsByTagName("span");
59 var divNode = document.getElementById("boxchild");
60 for (var i = 0; i < spanNode.length; i++) {
61 spanNode[i].onclick = function () {
62 var index = this.innerText;
63 change(index);
64 }
65 }
66 function change(index) {
67 var t = 300-(index-1)*100;
68 divNode.style.top= t + "px";
69 }
70 </script>
71 </body>
72 </html>
应该是可以做成立体的
时间： 2024-09-30 18:37:25