Javascript Resize和Drag类,基于jQuery
2010-09-14 13:41:25 来源:WEB开发网本文示例源代码或素材下载
前一段时间写了一个 "在线图片切割"的小程序,现在将其中的Resize和Drag动作作为单独的类分离出来,与大家分享。这两个类都须要jQuery支持,但应该可以很轻松的改写出非jQuery的版本出来。另外,Resize类与Drag类的代码很相似,如果想的话,应该可容易的整合为一个类。有心的朋友可以试一下。欢迎拍砖和提出建议:)
使用
点击这里查看演示效果。
Use Resize and Drag
$(function(){
var sa = document.getElementById('selectArea');
$('#selectArea span').mousedown(function(e){
new Resize(sa).start(e, this.className.replace('-resize', ''));
});
$('#selectArea').mousedown(function(e){
new Drag(sa).start(e);
});
});
下面是HTML部分:
Demo HTML
<div style="margin:30px 100px;position:relative;height:500px;border:1px solid #000;background-color:#EEE;">
this is wrapper.
<div id="selectArea" style="left:100px;top:80px;width:150px;height:100px; background-color:#CCC;">
<span class="north-west-resize"></span><span class="north-resize"></span><span class="north-east-resize"></span>
<span class="west-resize"> </span> <span class="east-resize"> </span>
<span class="south-west-resize"></span><span class="south-resize"></span><span class="south-east-resize"></span>
you can resize and drag this box.
</div>
</div>
Tags:Javascript Resize Drag
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接