jcrop的例子

piperzero

浏览: 3555540 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

<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>