左右拖动jQuery分割div容器特效插件

左右拖动jQuery分割div容器特效插件

split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割,并可以上下改变父div的高度,而且宽和高都是按百分比计算。

使用方法
在页面中引入jquery和split.js文件。

1
2
<script src="js/split.js"></script>                  
<script src="js/jquery.min.js"></script>

HTML结构

1
2
3
<div class='hj-wrap'>
  <div class="arrow"></div>
</div>

实现原理为:首先一个父 div 为hj-wrap,相对定位 。arrow是分割线,用于上下拖动 , 不能占有位置,绝对定位到父容器的底部。上下拖动的 arrow,当上拖动时,arrow的父 div 的高度变小,当下拖动时,arrow的父 div 的高度变大。

横向布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class='hj-wrap'>
    <div class="hj-transverse-split-div">
        横 向
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 2
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 3
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 4
        <label class="hj-transverse-split-label"></label>
    </div>
    <div class="hj-transverse-split-div">横 向 5
    </div>
    <div class="arrow"></div>
</div>

竖向布局

1
2
3
4
5
6
7
8
9
10
<div class='hj-wrap verticals'>
    <div class="hj-vertical-split-div">
        <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">
        <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div"></div>
    <div class="arrow"></div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论