| <style type="text/css"> |
| |
#d1{ /* 外层大框 */ |
| |
width: 100%; |
| |
position: relative; |
| |
top: 0px; |
| |
transition: 2s; |
| |
} |
| |
.d2{ /* 里面五个框 */ |
| |
width: 100%; |
| |
height: 700px; |
| |
border: 1px solid red; |
| |
} |
| |
|
| |
#a1{ /* 圆点外层框 */ |
| |
width: 200px; |
| |
height: 250px; |
| |
border: 1px solid black; |
| |
position: fixed; /* 固定位置 */ |
| |
top: 300px; |
| |
right: 30px; |
| |
} |
| |
.a2{ /* 小圆点容器 */ |
| |
width: 150px; |
| |
height: 40px; |
| |
} |
| |
.a3{ /* 小圆点 */ |
| |
width: 20px; |
| |
height: 20px; |
| |
float: right; |
| |
background-color: #FF0000; |
| |
border-radius: 10px; /* 切⚪ */ |
| |
} |
| |
.a4{ /* 小圆点左边小文字 */ |
| |
float: right; |
| |
width: 60px; |
| |
height: 30px; |
| |
text-align: center; |
| |
line-height: 25px; |
| |
border-radius: 7px; |
| |
background: rgba(0,0,0,0.5); /* 文字外小黑框 */ |
| |
color: white; |
| |
} |
| |
@keyframes donghua{ /* 给小圆点一个动画效果 */ |
| |
0% {width: 20px;} |
| |
50%{width: 70px;} |
| |
100%{width: 20px;} |
| |
|
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="d1"> |
| |
<div class="d2"></div> |
| |
<div class="d2"></div> |
| |
<div class="d2"></div> |
| |
<div class="d2"></div> |
| |
<div class="d2"></div> |
| |
</div> |
| |
<div id="a1"> |
| |
<div class="a2"> |
| |
<div class="a3" onclick="hs(0)" > </div> |
| |
<div class="a4">第一页</div> |
| |
</div> |
| |
|
| |
<div class="a2"> |
| |
<div class="a3" onclick="hs(1)" > </div> |
| |
<div class="a4">第二页</div> |
| |
</div> |
| |
|
| |
<div class="a2"> |
| |
<div class="a3" onclick="hs(2)" > </div> |
| |
<div class="a4">第三页</div> |
| |
</div> |
| |
|
| |
<div class="a2"> |
| |
<div class="a3" onclick="hs(3)" > </div> |
| |
<div class="a4">第四页</div> |
| |
</div> |
| |
|
| |
<div class="a2"> |
| |
<div class="a3" onclick="hs(4)"> </div> |
| |
<div class="a4">第五页</div> |
| |
</div> |
| |
</div> |
| |
</body> |
| |
</html> |
| |
<script type="text/javascript"> //js部分 |
| |
var a3 = document.querySelectorAll('.a3') //声明找到小圆点 |
| |
var divd1 = document.getElementById('d1') //声明找到最外层大框 |
| |
function hs(d1){ //声明函数， |
| |
|
| |
var juli = d1*700 |
| |
divd1.style.top = '-'+juli+'px' |
| |
a3[d1].style.transition = '1s' |
| |
a3[d1].style.animation = 'donghua 2s' //小圆点动画指定 |
| |
|
| |
//小圆点动画只能执行一次，需要用for循环+if判断来清空原来的动画属性 |
| |
for(var i = 0;i<a3.length; i++){ |
| |
if(i !=d1){ |
| |
a3[i].style.animation = "" |
| |
} |
| |
} |
| |
} |
| |
|
| |
</script> |
