当前位置：首页 > 网页特效 > 其他

可上下左右拖动的jQuery分割div容器插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入jquery和split.js文件。

```html
<script src="js/split.js"></script>                  
<script src="js/jquery.min.js"></script>      
```            
#####  HTML结构
```html
<div class='hj-wrap'>
  <div class="arrow"></div>
</div>
```
实现原理为：首先一个父 div 为hj-wrap，相对定位 。arrow是分割线，用于上下拖动 , 不能占有位置，绝对定位到父容器的底部。上下拖动的 arrow，当上拖动时，arrow的父 div 的高度变小，当下拖动时，arrow的父 div 的高度变大。

##### 横向布局
```html
<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>
```
#####  竖向布局
```html
<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>          
```

web299.com

可上下左右拖动的jQuery分割div容器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果