jquery实现穿梭框功能

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

先上效果图

就只需要引用一个jq文件就可以

 
  
  
  
  
  
   .float{
    float: left;
   }

   .float select{
    width: 300px;
    border: 1px solid #ebeef5;
    height: 200px;
   }
   .top_title{
    width: 298PX;
    height: 30px;
    border: 1px solid #ebeef5;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    line-height: 30px;
    background: #fbfbfb;
    display: flex;
    justify-content: space-between;
   }
   .last_num{
    margin-right: 10px;
   }

   .search{
    width: 300px;

    display: flex;
    
   }
   .search input{
    float: left;
    flex: 4;
    height: 30px;
    outline: none;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    padding-left: 10px;
   }
   .search_button{
    float: right;
    flex: 1;
    height: 30px;
    background-color: #f1f1f1;
    color: #000000;
    border-style: none;
    outline: none;
    cursor: pointer;
   }
   .search button i{
    font-style: normal;
   }
   .search button:hover{
    font-size: 16px;
   }
   .to_left,.to_right{
    width: 20px;
    height:20px;
    color:white;
    background-color:#667082;
    border-radius: 100%;
    border-width: 0;
    margin: 0;
    outline: none;

    text-align: center;
    cursor: pointer;
   }
   button:hover{
    background-color: #aa9a8a;
   }
   .click_button{

 border-radius: 5px;
 background: #deded8;
 padding: 5px 0;
 margin: 115px 5px 0px 5px;
   }

  
 

 
  
  
   
    全选
    标题
    0/0
   
   
    

   

   
    11111
    22222
    33333
    123
    23312
    23233
    21233
    12233
    23133

   
  

  
   
    >
    <
  

  
  
   
    全选
    标题
    0/0
   
   
    

   

   
   11111
   22222
   33333
   123
   233

   
  
  

 

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