jQuery实现穿梭框效果

本文实例为大家分享了jQuery实现穿梭框效果的具体代码，供大家参考，具体内容如下

简介：今天给大家带来穿梭框的实现

布局的实现

  
   


   
  
  
   >>>>
   
    <<<< 
  
  
   


   
  

布局的样式

  * {
   margin: 0 auto;
   padding: 0;
   list-style: none;
  }

  #box {
   width: 500px;
   display: flex;
   justify-content: space-around;
   margin-top: 20px;
  }

  #boxright {
   width: 200px;
   height: 500px;
   border: 1px solid darkcyan;
  }

  #boxleft {
   width: 200px;
   height: 500px;
   border: 1px solid darkcyan;
  }

  #boxbtn {
   margin: auto;
  }

  #boxbtn button {
   width: 50px;
   height: 200ox;
   margin-top: 10px;
   display: flex;
   background: deepskyblue;
   cursor: pointer;
   color: white;
  }

  ul li {
   height: 30px;
   line-height: 30px;
   margin-bottom: 2px;
   text-align: center;
   background: darkgray;
  }

  form {
   text-align: center;
  }

  .active {
   color: white;
   background: darkseagreen;
  }

代码实现

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