圖片切割外掛程式分步實現（二）

標籤：

相對於上一個版本，

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="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>

圖片切割外掛程式分步實現（二）