可拖动的jQuery便签特效

一款可拖动的jQuery便签特效，鼠标左键按住便签标题位置可以任意拖动位置，便签的窗口也可以随意改变大小，支持多个文本段落或图文混排亦可，窗口样式、字体等均可自由调整。

分类：悬浮层/弹出层 > 悬浮层难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，多个div容器放入不同的内容，代码如下：

<div id="ipad">
  <div class="ipad-title"><h1>便签小贴士</h1></div>
  <div class="ipad-control">
    <span class="T"></span>
    <span class="R"></span>
    <span class="B"></span>
    <span class="L"></span>
    <span class="TR"></span>
    <span class="BR"></span>
    <span class="BL"></span>
    <span class="LT"></span>
  </div>
  <div class="ipad-cont">
    <div class="textArea">
      <p>1. 可拖动的jQuery便签特效</p>
      <p>2. 支持：自定义宽高，缩小的最小宽高、拖拽范围限制</p>
      <p>3. 功能：头部拖拽、四角四边的放大缩小，自定义滚动条</p>
    </div>
  </div>
  <div class="ipad-bar"><i class="bar"></i></div>
</div>

页面的底部，需引入jQuery库和另外两个JS文件，启用插件并设置好相关参数，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ipad.js"></script>
<script type="text/javascript" src="js/scrollbar.js"></script>
<script type="text/javascript">
$(function () {
  $('#ipad').ipad({
    width: 200,
    height: 300,
    limitedWidth: 200,
    limitedHeight: 300,
    dragLimited: true
  });

  ipadScrollBar();
});
</script>