特效描述:jQuery 便签效果 可自由拖动特效。jQuery实现便签效果可自由拖动特效代码下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script src="js/ipad.js"></script> <script src="js/scrollBar.js"></script>
3. HTML代码
<div id="ipad"> <div class="ipad-title"><h1>jQuery-Pad</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> <p>4. 请在转载时保留作者信息,更多我的效果可移步至: http://sc.chinaz.com/jiaoben/</p> <p>5. 如有问题可留言或发邮件给我</p> </div> </div> <div class="ipad-bar"><i class="bar"></i></div> </div> <script> $(function () { $('#ipad').ipad({ width: 200, height: 300, limitedWidth: 200, limitedHeight: 300, dragLimited: true }); ipadScrollBar(); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>