一个Switch控件

最新推荐文章于 2024-07-12 20:49:16 发布

97110100114111105100

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量317

点赞数

分类专栏： HTML与CSS JavaScript 文章标签： css switch xhtml

本文链接：https://blog.csdn.net/u013480913/article/details/37989645

版权

HTML与CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

>>一个switch

--------------效果图-------------------

------------------------------------------

>>记录以下，以备后用。

>>以下是代码

    <style>
        #switch{position: absolute;right: 50px;top: 44px; width: 76px;
        height: 30px;overflow: hidden;}
        #switch .content{width: 116px; position: absolute;left: 0px;top: 0px;}
        #switch .show{margin-top: 1px;float: left;
        width:40px;height: 28px; background: #56C095;border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;}
        #switch  p{margin: 0px;text-align: center;height:28px; 
        font-size: 12px;line-height: 28px;font-family: sans-serif;font-weight: bolder;}
        #switch .center{cursor: pointer;border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        float: left;width:36px;height: 28px; background:#EEEEEE;}
        #switch .hide{margin-top: 1px;float: left;
        width: 40px;height: 28px; background: #56C095;border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;}
    </style>

      <div id="switch">
          <div class="content">
              <div class="show"><p>显示</p></div>
              <div class="center"></div>
              <div class="hide"><p>隐藏</p></div>
          </div>
      </div>
      
     <script>
         $("#switch .center").click(function(){
             var x = "0px";
             var _that = $(this);
             if($("#switch .content").position().left > -38){
                 x = "-40px";
             }
             $("#switch .content").animate({"left":x},"fast",function(){
                 if(x == "0px"){
                     _that.css("border-top-left-radius","0");
                     _that.css("border-bottom-left-radius","0");
                     _that.css("border-top-right-radius","5px");
                     _that.css("border-bottom-right-radius","5px");
                 }else{
                     _that.css("border-top-left-radius","5px");
                     _that.css("border-bottom-left-radius","5px");
                     _that.css("border-top-right-radius","0");
                     _that.css("border-bottom-right-radius","0");
                 }
             });
         });
    </script>