jQuery实现分隔条左右拖动功能

本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体内容如下

 
  
  
  
    html, body, div {
      margin: 0;
      padding: 0;
      border: 0;
      -moz-user-select: none;
      -webkit-user-select: none;
    }

    .gf_s {
      float: left;
      width: 4px;
      cursor: e-resize;
      background-color: #fff;
      border: #99BBE8 1px solid;
    }

    .gf_s_g {
      float: left;
      width: 4px;
      display: none;
      cursor: e-resize;
      position: absolute;
      background-color: #F0F0F0;
      border: #99BBE8 1px solid;
      filter: alpha(opacity=60);
      -moz-opacity: 0.6;
      -khtml-opacity: 0.6;
      opacity: 0.6;
      z-index: 1000;
    }
  
 
 
   
     
     
     
     
   

   
 

希望本文所述对大家学习jquery分隔条有所帮助。