jcrop的例子

jcrop的例子_第1张图片

<html>
<head>
<script src='js/jquery-1.5.1.js'></script>
<script src='js/jquery.Jcrop.js'></script>
<style type="text/css">
body{
background-color:#ccc;
}
.jcrop-holder {
text-align: left;
}
.jcrop-vline, .jcrop-hline{
font-size: 0;
position: absolute;
background: white ;
}
.jcrop-vline {
height: 100%;
width: 10px ;
}
.jcrop-hline {
width: 100%;
height: 10px !important;
}
.jcrop-handle {
font-size: 1px;
width: 7px !important;
height: 7px !important;
border: 1px #eee solid;
background-color: #333;
*width: 9px;
*height: 9px;
}

.jcrop-tracker {
width: 100%;
height: 100%;
}

.custom .jcrop-vline,.custom .jcrop-hline{
background: yellow;
}
.custom .jcrop-handle{
border-color: black;
background-color: #C7BB00;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
</style>
<script type='text/javascript'>
$(function(){
$('#cropbox').Jcrop({
onSelect:showCoords,
onChange:showCoords,
bgColor:"#ccc", //裁剪时背景颜色设为灰色
bgOpacity:0.5, //透明度设为0.1
allowResize:false, //不允许改变选中区域的大小
setSelect:[0,0,100,100] //初始化选中区域
});
});
function showCoords(c) {
$("#txtX1").val(c.x); //得到选中区域左上角横坐标
$("#txtY1").val(c.y); //得到选中区域左上角纵坐标
$("#txtX2").val(c.x2); //得到选中区域右下角横坐标
$("#txtY2").val(c.y2); //得到选中区域右下角纵坐标
$("#txtWidth").val(c.w); //得到选中区域的宽度
$("#txtHeight").val(c.h); //得到选中区域的高度
}
</script>
</head>
<body>
<img src='images/03.jpg' id='cropbox' width=500 height=400/>
<br>
<label>x1</label><input type="text" id="txtX1" />
<label>y1</label><input type="text" id="txtY1" />
<label>x2</label><input type="text" id="txtX2" />
<label>y2</label><input type="text" id="txtY2" />
<br>
<label>width</label><input type="text" id="txtWidth" />
<label>height</label><input type="text" id="txtHeight" />
</body>
</html>


<wbr></wbr>

你可能感兴趣的:(例子)