<!doctype html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>模版</title> | |
<style> | |
/* reset */ | |
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} | |
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} | |
table{border-collapse:collapse;border-spacing:0;} | |
caption,th{text-align:left;font-weight:normal;} | |
html,body,fieldset,img,iframe,abbr{border:0;} | |
i,cite,em,var,address,dfn{font-style:normal;} | |
[hidefocus],summary{outline:0;} | |
li{list-style:none;} | |
h1,h2,h3,h4,h5,h6,small{font-size:100%;} | |
sup,sub{font-size:83%;} | |
pre,code,kbd,samp{font-family:inherit;} | |
q:before,q:after{content:none;} | |
textarea{overflow:auto;resize:none;} | |
label,summary{cursor:default;} | |
a,button{cursor:pointer;} | |
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} | |
del,ins,u,s,a,a:hover{text-decoration:none;} | |
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} | |
body{background:#fff;} | |
a,a:hover{color:#333;} | |
/*自定义样式*/ | |
html,body { | |
padding: 0; | |
margin: 0; | |
width: 100%; | |
height: 100%; | |
font-family: Helvetica,Tahoma,Arial,STXihei,"STHeiti Light","Microsoft YaHei",SimSun,SimHei,sans-serif; | |
} | |
#course_select{width:100%;} | |
#course_select tr td{text-align:center;} | |
</style> | |
<script src="http://dwz.cn/jquery111"></script> | |
</head> | |
<body> | |
<table id="course_select"> | |
<tr> | |
<td style="width:70%;"><br/>前面blablablablablablabla | |
<div style="display:inline-block;"><img src="http://p5.yokacdn.com/pic/star/topic/2014/U230P1T1D925309F9DT20140519091616.jpg" id="img"></div> | |
后面blablablablablablablablablablablabla | |
</td> | |
<td style="width:30%;"> | |
<div> | |
<p>在图片上产生一个矩形的遮罩</p> | |
<p>首先将焦点定位在start输入框 然后点击图片上要产生的矩形的左上角位置</p> | |
<p>再将焦点定位在end输入框,最后点击图片上要产生矩形的右下角位置</p> | |
<p> 点击 计算 可预览效果</p> | |
<p>点击 清除 可关闭预览效果</p> | |
<label><h3>start</h3></label> | |
<input type="text" id="start" style="zoom: 2;"> | |
</div> | |
<div style="margin-top:5px;"> | |
<label><h3>end</h3></label> | |
<input type="text" id="end" style="zoom: 2;"> | |
</div> | |
<div style="margin-top:5px;"> | |
<button id="OK">计算</button> | |
<button id="clear">清除</button></div> | |
</td> | |
</tr> | |
</table> | |
<script> | |
var mousePosition = function(ev) { | |
if (ev.offsetX || ev.offsetY){ | |
return {x: ev.offsetX,y: ev.offsetY}; | |
}else if (ev.layerX || ev.layerY) { | |
return {x: ev.layerX,y: ev.layerY}; | |
}else{ | |
console.log(ev); | |
return {x:(ev.clientX-ev.currentTarget.offsetLeft),y:(ev.clientY-ev.currentTarget.offsetTop)} | |
//return false; | |
} | |
} | |
$(document).ready(function(){ | |
var point = "start"; | |
$("#start,#end").css({"border": "1px solid #00bc3e"}); | |
//图片的事件 | |
$("#img").click(function(e){ | |
//获取鼠标当前位置 | |
var mouse_coordinates = mousePosition(e); | |
console.dir(mouse_coordinates); | |
$("#"+point+"").val([mouse_coordinates.x,mouse_coordinates.y].join()); | |
return false; | |
}); | |
//控件输入定位 | |
$("#start,#end").click(function(){ | |
$("#start,#end").css({"border": "1px solid #00bc3e"}); | |
point = $(this).attr("id"); | |
$("#"+point).css({"border": "1px solid #aa0000"}); | |
return false; | |
}); | |
//计算输入的矩形 | |
$("#OK").click(function(){ | |
var start = $("#start").val(); | |
var end = $("#end").val(); | |
if( start.match(/^\d+,\d+$/) === null || end.match(/^\d+,\d+$/) === null ){ | |
alert("坐标的值错误,请重新确认后计算"); | |
return false; | |
} | |
start = start.split(","); | |
end = end.split(","); | |
var width = end[0]-start[0]; | |
var height= end[1]-start[1]; | |
if(width<=0 || height<=0){ | |
alert("坐标必须是[左上][右下]两个点,请确认位置"); | |
return false; | |
} | |
var top = parseInt(start[1]); | |
var left = parseInt(start[0]); | |
$("#img").parent().css("position","relative"); | |
var html = "<div style=\"width:"+width+"px;height:"+height+"px;background:rgba(255, 0, 0, 0.56);position: absolute;top:"+top+"px;left:"+left+"px;\"> </div>"; | |
$("#img").parent().append(html); | |
return false; | |
}); | |
$("#clear").click(function(){ | |
$("#img ~ div").remove(); | |
return false; | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
![]() |
1
emric 2015-04-29 03:32:01 +08:00 ![]() |
![]() |
2
loginv2 OP 非常感谢 问题已解决
但是没理解问题2的结果 为何会产生小数,单位不是像素么? |
![]() |
3
ledzep2 2015-04-29 08:51:45 +08:00
以后发前端求助最好用codepen之类的啊.
|