<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">
<!--
#cutBg {
padding: 0px;
height: 600px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
background-color: #0033FF;
}
#cutBg #cutDiv {
margin: 0px;
padding: 0px;
height: 600px;
width: 800px;
position: relative;
top: 0px;
left: 0px;
}
#cutDis {
display: none;
position: relative;
background-color:#FFFFFF;
filter: Alpha(opacity=50);
left: 0px;
top: 0px;
}
-->
</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>
js切图
最新推荐文章于 2021-08-31 16:30:30 发布