开发学院网页设计JavaScript Javascript Resize和Drag类,基于jQuery 阅读

Javascript Resize和Drag类,基于jQuery

 2010-09-14 13:41:25 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 前一段时间写了一个 "在线图片切割"的小程序,现在将其中的Resize和Drag动作作为单独的类分离出来,Javascript Resize和Drag类,基于jQuery,与大家分享,这两个类都须要jQuery支持,应该可容易的整合为一个类,有心的朋友可以试一下,但

本文示例源代码或素材下载

前一段时间写了一个 "在线图片切割"的小程序,现在将其中的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>

1 2 3 4  下一页

Tags:Javascript Resize Drag

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读