Java script 点击 页面滑动效果

<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>
posted @ 2022-03-18 23:55  猫java猫  阅读(56)  评论(0)    收藏  举报