<script type="text/javascript">

    $(document).ready(function() {

    var api = $.Jcrop("#ctl00_DefaultContent_xuwanting", {

            setSelect: [0, 0, 120, 120] //setSelect是Jcrop插件内部已定义的运动方法

        }); 

        //记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化

        $("#ctl00_DefaultContent_xuwanting").Jcrop({

            onChange: showPreview,

            onSelect: showPreview,

            aspectRatio: 1

        });



        //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用

        function showPreview(coords) {

            if (parseInt(coords.w) > 0) {

                //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到

                var rx = $("#preview_box").width() / coords.w;

                var ry = $("#preview_box").height() / coords.h;

                //通过比例值控制图片的样式与显示

                $("#crop_preview").css({

                width: Math.round(rx * $("#ctl00_DefaultContent_xuwanting").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积

                height: Math.round(rx * $("#ctl00_DefaultContent_xuwanting").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积

                    marginLeft: "-" + Math.round(rx * coords.x) + "px",

                    marginTop: "-" + Math.round(ry * coords.y) + "px"

                });

                rx = $("#preview_box1").width() / coords.w;

                ry = $("#preview_box1").height() / coords.h;

                //通过比例值控制图片的样式与显示

                $("#crop_preview1").css({

                width: Math.round(rx * $("#ctl00_DefaultContent_xuwanting").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积

                height: Math.round(rx * $("#ctl00_DefaultContent_xuwanting").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积