JS实现滑动导航效果

本文实例为大家分享了JS实现滑动导航效果的具体代码，供大家参考，具体内容如下

 
 
 
 
 
  * {
   padding: 0;
   margin: 0;
  }
  ul {
   list-style-type: none;
   height: 42px;
   position: absolute;
  }
  img {
   vertical-align: middle;
  }
  li,
  a {
   cursor: pointer;
  }
  a {
   text-decoration: none;
   color: #000000;
   display: block;
  }
  li {
   width: 83px;
   height: 42px;
   
   float: left;
   text-align: center;
   line-height: 42px;
  }
  .box {
   position: relative;
   width: 530px;
   height: 42px;
   border: 1px solid deepskyblue;
   margin: 100px auto;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
  }
  .box img#cloud {
   width: 83px;
   height: 42px;
   position: absolute;
   left: 0;
   top: 0;
  }
  .box img#xinhao {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
  }
 



 
 

  
长沙校区
  
长沙校区
  
长沙校区
  
长沙校区
  
长沙校区
  
长沙校区
 
 

最终效果如下：云彩跟随鼠标移动，点击固定

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。