加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 (https://www.0519zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

使用jquery怎样编辑穿梭框效果?

发布时间:2022-04-14 13:57:40 所属栏目:语言 来源:互联网
导读:如何用jquery实现穿梭框效果?穿梭框效果就是将在一个选择框内选中的选项添加到另一个选择框中的效果,那么这一效果要如何来实现呢?下面小编就给大家分享一下jquery实现穿梭框效果的代码,效果图和代码如下,感兴趣的朋友可以看一看。 就只需要引用一个jq文
       如何用jquery实现穿梭框效果?穿梭框效果就是将在一个选择框内选中的选项添加到另一个选择框中的效果,那么这一效果要如何来实现呢?下面小编就给大家分享一下jquery实现穿梭框效果的代码,效果图和代码如下,感兴趣的朋友可以看一看。
 
       就只需要引用一个jq文件就可以
 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>穿梭框</title>
  <link rel="stylesheet" href="index.css" >
  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  <style>
   .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 button:hover{
    font-size: 16px;
   }
   .to_left,.to_right{
    width: 20px;/*设置按钮宽度*/
    height:20px;/*设置按钮高度*/
    color:white;/*字体颜色*/
    background-color:#667082;/*按钮背景颜色*/
    border-radius: 100%;/*让按钮变得圆滑一点*/
    border-width: 0;/*消去按钮丑的边框*/

(编辑:常州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读