首页 > 代码库 > 图片切割插件分步实现（二）
图片切割插件分步实现（二）
相对于上一个版本，
1，这次修复了container位置在左上角的bug,
2，容器container大小改为图片本身大小，
3，控制层controlLayer以及切割显示层imgLayer改为通过js初始化（方便以后添加调整）
4，容器container位置也可以随意调整而不影响其它功能
效果：http://oospace.sinaapp.com/cut1.php
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>图片切割</title>
</head>
<style>
body{
background-color:#DCDCDC;
}
.container{
position:absolute;
border:1px solid black;
border-radius:3px;
background-color:#000000;
}
.imgLayer{
position:absolute;
}
.controlLayer{
position:absolute;
zoom:1;
border:1px dashed black;
/*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;
}
#imgStyle{
display:none;
}
#rect{
position:absolute;
right:0px;
}
</style>
<body>
<img id="imgStyle" />
<div class="container">
</div>
<div class="imgLayer">
</div>
<div class="controlLayer">
<div class="leftTop mark"></div>
<div class="topCenter mark"></div>
<div class="rightTop mark"></div>
<div class="leftCenter mark"></div>
<div class="rightCenter mark"></div>
<div class="leftBottom mark"></div>
<div class="bottomCenter mark"></div>
<div class="rightBottom mark"></div>
</div>
<div id="rect"></div>
</body>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.10.2.min.js"></script>
<script>
//拖动效果代码
//var _z=9999;
$(document).ready(function(){
var img=$(".imgLayer");//图片切割层
var ctain=$(".container");//容器
var imgStyle=$("#imgStyle")//
//初始化图片地址（注意，只能在onload之前添加图片才有效）
imgStyle.attr("src","img/cut.jpg");//图片地址
ctain.css({background:"url(img/cut.jpg) top left no-repeat"});
img.css({background:"url(img/cut.jpg) top left no-repeat"});
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var wd;//窗口
//设置宽度和高度
$(".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-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.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"));
var imgLeft=parseInt(imgStyle.css("left"));
var imgTop=parseInt(imgStyle.css("top"));
l_ctn=isNaN(l_ctn)?0:l_ctn;
t_ctn=isNaN(t_ctn)?0:t_ctn;
//设置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)&&(x>=l_ctn)&&h_ctn>=(y+h_wd-t_ctn)&&(y>=t_ctn)){
wd.css({left:x,top:y});//控件新位置
img.css("clip",rect);//切割位置
}
$("#rect").html(rect);
//var ximg=e.pageX-_ximg;//移动时根据鼠标位置计算控件左上角的绝对位置
//var yimg=e.pageY-_yimg;
//img.css({top:yimg,left:ximg});//图片新位置
}
}).mouseup(function(){
_move=false;
/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
});
});
});
//初始化
window.onload=function(){
var img=$(".imgLayer");//图片切割层
var ctain=$(".container");//容器
var imgStyle=$("#imgStyle")//
var control=$(".controlLayer");
var imgWidth=imgStyle.css("width");//注意只能放在window.onload里面，因为只有图片加载完毕以后才能它的获取大小
var imgHeight=imgStyle.css("height");
var imgLeft=30;//初始化container的位置
var imgTop=40;
img.css({width:imgWidth,height:imgHeight});//根据图片本身大小自动设置容器层container和图片切割层的大小
ctain.css({width:imgWidth,height:imgHeight,opacity:"0.4",filter:"alpha(opacity=40)",left:imgLeft+"px",top:imgTop+"px"});
var lf=imgLeft;//初始化控制层controlLayer大小及切割显示层imgLayer大小
var tp=imgTop;
var wt=ht=90;
lf=isNaN(lf)?0:lf;
tp=isNaN(tp)?0:tp;
//调整三层的位置
control.css({left:lf+"px",top:tp+"px",width:wt+"px",height:ht+"px"});
ctain.css({left:lf+"px",top:tp+"px"});
img.css({left:lf+"px",top:tp+"px"});
//初始化切割层显示区域
var rect="rect( "+0+"px "+wt+"px "+ht+"px "+0+"px )";
img.css({"clip":rect});
$("#rect").html(img.css("clip"));
}
</script>
</html>图片切割插件分步实现（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。