linux图片切割,图片切割插件分步实现（一）

该插件是在窗口拖动效果的基础上实现的

当然，这不是最终版，只是一个勉强实现图片切割效果的不稳定版，还有bug,也还有功能未实现，我这样写只是为了把图片切割分成几个单独的功能，然后通过整合实现最终效果，这样方便大家理解和自己修改。

插件源码如下

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

登录

body{

background-color:#DCDCDC;

}

.container{

position:absolute;

height:400px;

width:300px;

border:1px solid black;

border-radius:3px;

background:url("http://oospace.sinaapp.com/img/cut.jpg") no-repeat;

background-color:black;

opacity:0.2;

filter:alpha(opacity=20);

top:100px;

left:100px

}

.imgLayer{

position:absolute;

background:url("http://oospace.sinaapp.com/img/cut.jpg") no-repeat;

height:400px;

width:300px;

clip:rect(20px  280px 300px 30px);

top:100px;

left:100px

}

.controlLayer{

position:absolute;

height:280px;

width:250px;

zoom:1;

border:1px dashed #DCDCDC;

top:120px;

left:130px;

/*cursor:move;*/

}

.mark{

border:1px solid #000000;

background-color:#ffffff;

opacity:0.8;

filter:alpha(opacity=80);

padding:2px;

height:3px;

width:3px;

}

.leftTop{

position:absolute;

top:-3px;

left:-3px;

cursor: se-resize;

}

.leftCenter{

position:absolute;

top:50%;

left:-3px;

cursor: w-resize;

}

.topCenter{

position:absolute;

top:-3px;

left:50%;

cursor: ns-resize;

}

.rightTop{

position:absolute;

top:-3px;

right:-3px;

cursor: ne-resize;

}

.rightCenter{

position:absolute;

top:50%;

right:-3px;

cursor: e-resize;

}

.leftBottom{

position:absolute;

bottom:-3px;

left:-3px;

cursor: ne-resize;

}

.bottomCenter{

position:absolute;

bottom:-3px;

left:50%;

cursor: s-resize;

}

.rightBottom{

position:absolute;

bottom:-3px;

right:-3px;

cursor: se-resize;

}

//拖动效果代码

//var _z=9999;

$(document).ready(function(){

var _move=false;//移动标记

var _x,_y;//鼠标离控件左上角的相对位置

var wd;//窗口

var img=$(".imgLayer");//图片

var ctain=$(".container");

$(".controlLayer").click(function(){

//alert("click");//点击(松开后触发)

this.style.cursor = "default";//鼠标形状

//this.style.zIndex = 999;

}).mousedown(function(e){

_move=true;

wd=$(this);

this.style.cursor = "move";//鼠标形状

//this.style.zIndex = _z;//窗口层次

//_z++;

_x=e.pageX-parseInt(wd.css("left"));

_y=e.pageY-parseInt(wd.css("top"));

//_ximg=e.pageX-parseInt(img.css("left"));

//_yimg=e.pageX-parseInt(img.css("top"));

/*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示

$(document).mousemove(function(e){

if(_move){

var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置

var y=e.pageY-_y;

//设置controlLayer的范围

var w_ctn=parseInt(ctain.css("width"));

var h_ctn=parseInt(ctain.css("height"));

var l_ctn=parseInt(ctain.css("left"));

var t_ctn=parseInt(ctain.css("top"));

var  w_wd=parseInt(wd.css("width"));

var  h_wd=parseInt(wd.css("height"));

//设置imgLayer的范围

var top=y-t_ctn+"px";

var right=parseInt(wd.css("width"))+x-l_ctn+"px";

var bottom=parseInt(wd.css("height"))+y-t_ctn+"px";

var left=x-l_ctn+"px";

var rect="rect( "+top+" "+right+" "+bottom+" "+left+" )";

//根据container控制移动范围

if(w_ctn>=(x+w_wd-l_ctn)&&h_ctn>=(y+h_wd-t_ctn)&&(y>=t_ctn)&&(x>=l_ctn)){

wd.css({top:y,left:x});//控件新位置

img.css("clip",rect);//切割位置

//img.css({top:ctain.css("top"),left:ctain.css("left")});//切割显示图片新位置

}

//var ximg=e.pageX-_ximg;//移动时根据鼠标位置计算控件左上角的绝对位置

//var yimg=e.pageY-_yimg;

//img.css({top:yimg,left:ximg});//图片新位置

}

}).mouseup(function(){

_move=false;

/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明

});

});

});

这个版本还有很多的HTML和CSS样式。之所以这样分开，是为了让Jquery代码更少，看起来容易抓住重点，方便理解

如大家所见，效果很粗糙，拖动到边界时有些生硬，当斜着拖动时，一旦其中一边接触边界便无法再动。

实现原理：

大家看了HTML代码应该就很清楚了，一共有三层

容器层：container,用来显示变暗的图片效果

切割层：imgLayer，用来显示被选中的图片区域

控制层：controlLayer，用来显示控制拖动效果和缩放效果(本版本暂未实现)

未完待续。。。