js切图

最新推荐文章于 2021-08-31 16:30:30 发布

hwshan126

最新推荐文章于 2021-08-31 16:30:30 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： function input javascript div 文档 up

本文链接：https://blog.csdn.net/hwshan126/article/details/6270113

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var mouseDownX;
var mouseDownY;
var mouseUpX;
var mouseUpY;
var divLeft;
var divTop;
var moveing;
moveing=0;
divLeft="0";
divTop="0";
function down()
{
    if(cutDis.style.display=="block")
{
     cutDis.style.display="none";
}

mouseDownX=event.x;       /*获取开始位置相对图片上，左边框距离*/
    mouseDownY=event.y;
mouseDownX=parseInt(mouseDownX)+parseInt(divLeft);
mouseDownY=parseInt(mouseDownY)+parseInt(divTop);

moveing=1; /*切图开始*/
}
function disDown()    /*在切图层上重新进行切图层*/
{
    divLeft=cutDis.style.left;
    divTop=cutDis.style.top;
}
function up()
{
moveing=0;      /*切图结束*/
divLeft="0";
divTop="0";
}
function move()
{
   if(moveing==1) /*判断是否正在切图*/
   {
mouseUpX=event.x;   /*获取结束位置相对图片上，左边框距离*/
mouseUpY=event.y;

document.myform.downY.value=mouseDownY+"px";   /*在文本框显示坐标值*/
document.myform.upY.value=mouseUpY+"px";

document.myform.downX.value=mouseDownX+"px";
document.myform.upX.value=mouseUpX+"px";

cutDis.style.left = Math.min(mouseDownX,mouseUpX);   /*设置切图框离图片上的位置*/
cutDis.style.top = Math.min(mouseDownY,mouseUpY);

mouseUpX=Math.abs(mouseUpX-mouseDownX);              /*设计切图框的高宽属性*/
mouseUpY=Math.abs(mouseUpY-mouseDownY);

cutDis.style.width=mouseUpX;
cutDis.style.height=mouseUpY;

cutDis.style.display='block';                     /*显示图片*/

                                  /*修正一个BUG*/
   }
}
</script>
<style type="text/css">

</style>
</head>
<body>
<form name="myform">
<div id="cutBg">
   <div id="cutDiv" οnmοusedοwn="down()" onselectstart="return false" οnmοusemοve="move()" οnmοuseup="up()">
      <div id="cutDis" οnmοusedοwn="disDown()">
   </div>
   </div>
</div>
<div>你画的框左上角离图片左边：<input name="downX" type="text" /><br />你画的框左上角离图片顶边：<input name="downY" type="text" /><br />你画的框右下角离图片左边：<input name="upX" type="text" /><br />你画的框右下角离图片顶边：<input name="upY" type="text" /><br />
</div>
</form>
</body>