当前位置：首页 > 网页特效 > 动画效果

jQuery拆分面板插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

jQuery拆分面板插件

简介

在页面中引入split-pane.css、jquery和split-pane.js的文件。

```html
<link rel="stylesheet" type="text/css" href="assets/css/split-pane.css" />
<script src="assets/js/jquery-2.1.1.min.js"></script>
<script src="js/split-pane.js"></script>
```
#####  HTML结构
下面的HTML代码可以创建一个基本的左右拆分面板。

```html
<div id="split-pane-example" class="split-pane">
  <div class="split-pane-component" id="left-component">
    This is the left component
  </div>
  <div class="split-pane-divider" id="divider"></div>
  <div class="split-pane-component" id="right-component">
    This is the right component
  </div>
</div>  
```
#####  CSS样式
为面板添加一些基本样式。

```html
html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.split-pane-divider {
  background: #aaa;
}
#left-component {
  width: 20em;
}
#my-divider {
  left: 20em; /* Same as left component width */
  width: 5px;
}
#right-component {
  left: 20em;  /* Same as left component width */
  margin-left: 5px;  /* Same as divider width */
}     
```
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jQuery拆分面板插件。

#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jQuery拆分面板插件。

```html
$(function() {
  $('div.split-pane').splitPane();
});      
```

web299.com

jQuery拆分面板插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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