<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> <style type="text/css">.crop{width:680px; margin:20px auto; border:1px solid #d3d3d3; padding:4px; background:#fff}#cropzoom_container{float:left; width:500px}#preview{float:left; width:150px; height:200px; border:1px solid #999; margin-left:10px; padding:4px; background:#f7f7f7;}.page_btn{float:right; width:150px; margin-top:20px; line-height:30px; text-align:center}.clear{clear:both}.btn{cursor:pointer}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script><script type="text/javascript" src="js/jquery.cropzoom.js"></script><div class="crop"> <div id="cropzoom_container"></div> <div id="preview"><img id="generated" src="tmp/head.gif" /></div> <div class="page_btn"><input type="button" class="btn" id="crop" value="剪切照片" /><input type="button" class="btn" id="restore" value="照片复位" /> </div> <div class="clear"></div></div><script type="text/javascript">$(function() {var cropzoom = $(‘#cropzoom_container’).cropzoom({width: 500,//DIV层宽度height: 360,//DIV层高度bgColor: ‘#ccc’,//DIV层背景颜色enableRotation: true,//是否允许旋转图片true falseenableZoom: true,//是否允许放大缩小selector: {w:150,//选择器宽度h:200,//旋转高度showPositionsOnDrag:true,//是否显示拖拽的位置洗洗脑showDimetionsOnDrag:false,centered: true,//居中bgInfoLayer:’#fff’,borderColor: ‘blue’,//选择区域边框样式animated: false,maxWidth:150,//最大宽度maxHeight:200,//最大高度borderColorHover: ‘yellow’//鼠标放到选择器的边框颜色},image: {source: ‘http://www.js-css.cn/jscode/focus/focus19/images/b2.jpg’,width: 450,//图片宽度height: 300,//图片高度minZoom: 30,//最小放大比例maxZoom: 150//最大放大比例}}); $("#crop").click(function(){//裁剪提交cropzoom.send(‘resize_and_crop.php’, ‘POST’, {}, function(imgRet) {$("#generated").attr("src", imgRet);});}); $("#restore").click(function(){//显示初始状态照片$("#generated").attr("src", "tmp/head.gif");cropzoom.restore();});});</script>
，学做任何事得按部就班，急不得
