php+ajax剪切图片_PHP教程

<script><br />//目标源<br />var target;<br />//拖拽辅助容器<br />var helper;<br />//鼠标默认状态（false=没有按下）<br />var iMouseDown=false;<br />//当前的目标源<br />var ctar;<br />//鼠标偏移量<br />var mouseOff;<br />//ajax相关<br />var ajax;<br />//继承number类的NANA0，用途为：如果一个数为100px会返回100。<br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br />//初始化AJAX<br />function createRequest(){<br />var ajax;<br />if(window.ActiveXObject){<br /> try{<br /> ajax = new ActiveXObject("Microsoft.XMLHTTP");<br /> }catch(e){<br /> ajax = false;<br /> }<br />}else{<br /> try{<br /> ajax = new XMLHttpRequest();<br /> }catch(e){<br /> ajax = false;<br /> }<br />}<br />if(!ajax){<br /> alert("Error creating the XMLHttpRequest object.");<br />}else{<br /> return ajax;<br />}<br />}<br />//反送AJAX请求<br />function cutp(cutC){<br />ajax=createRequest();<br />ajax.onreadystatechange = action;<br />//发送请求的URL<br />url = "path=./test1.jpg&x="+parseInt(cutC.style.left)+"&y="+parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt<br />(cutC.offsetHeight);<br />window.status = url;<br />ajax.open("GET", "image.php?"+url, true);<br />ajax.send(null);<br />}<br />function action(){<br />var show = document.getElementById("show");<br />//如果SHOW这个容器原先有子节点，就清楚子节点<br />if(show.hasChildNodes()){<br /> show.removeChild(show.childNodes[0]);<br />}<br />//状态为4&200的时候返回信息<br />if(ajax.readyState==4&&ajax.status==200){<br /> show.innerHTML = ajax.responseText;<br />}<br />}<br />//创建可拖拽容器<br />function createContainer(arg){<br />helper = document.getElementById('helper');<br />//设置属性<br />helper.setAttribute("cut",1);<br />arg.onmouseover = function(){<br /> helper.style.display="block";<br />}<br />arg.onmouseout = function(){<br /> helper.style.display="none";<br />}<br />helper.ondblclick = function(){<br /> cutp(helper);<br />}<br />}<br />//获取鼠标位置<br />function mouseCoords(ev){<br />if(ev.pageX || ev.pageY){<br /> return {x:ev.pageX, y:ev.pageY};<br />}<br />return {<br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br />};<br />}<br /><br />//获取鼠标在当前容器的偏移量<br />function getMouseOffset(target, ev){<br />ev = ev || window.event;<br />var docPos = getPosition(target);<br />var mousePos = mouseCoords(ev);<br />return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br />}<br />//获取鼠标相对父节点的偏移量<br />function getPosition(e){<br />var left = 0;<br />var top = 0;<br />while (e.offsetParent){<br /> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br /> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br /> e = e.offsetParent;<br />}<br />left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br />top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br />return {x:left, y:top};<br />}<br />//鼠标移动处罚的函数<br />function mouseMove(ev){<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />var mousePos = mouseCoords(ev);<br />var rootar = tar.parentNode;<br />var mouseOf = getPosition(rootar);<br />//判断状态<br />if(iMouseDown&&mouseOff){<br /> var limLefX=mouseOf.x+rootar.offsetWidth-tar.offsetWidth;<br /> var limBottomY =mouseOf.y+rootar.offsetHeight-tar.offsetHeight;<br /> var conLeft = mousePos.x-mouseOff.x;<br /> var conTop = mousePos.y-mouseOff.y;<br /> if(conLeft>=mouseOf.x&&conLeft<=limLefX){<br /> helper.style.left = mousePos.x-mouseOff.x;<br /> }<br /> if(conTop>=mouseOf.y&&conTop<=limBottomY){<br /> helper.style.top = mousePos.y-mouseOff.y;<br /> }<br />}<br />}<br /><br />//鼠标按键起来的函数<br />function mouseUp(){<br />iMouseDown = false;<br />}<br /><br />//按下鼠标按键的函数<br />function mouseDown(ev){<br />iMouseDown = true;<br />ev = ev||window.event;<br />var tar = ev.target||ev.srcElement;<br />if(tar.getAttribute("cut")){<br /> var hmouseOff = getPosition(tar);<br /> helper.style.left = hmouseOff.x;<br /> helper.style.top = hmouseOff.y;<br /> mouseOff = getMouseOffset(tar,ev);<br />}<br />}<br />//监听事件<br />document.onmouseup = mouseUp;<br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />window.onload=function(){<br />target = document.getElementById("image");<br />createContainer(target);<br />}<br /></script>

#dragHelper

http://www.bkjia.com/PHPjc/445085.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/445085.htmlTechArticlestyle #image{background-image:url(test1.jpg);width:1000px;height:200px;border:1px solid #000} /*绝对定位很重要*/ #helper{position:absolute;width:100px;height:100px;border:1p...