一款可拖动的jQuery便签特效,鼠标左键按住便签标题位置可以任意拖动位置,便签的窗口也可以随意改变大小,支持多个文本段落或图文混排亦可,窗口样式、字体等均可自由调整。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791