web浏览图片支持旋转，缩放功能

   
浏览图片使用了layer插件,旋转需要引用jquery.rotate.min.js 放大缩小是根据图片等比例缩放，下面是本人写的部分代码：
在layer.ext.js这个插件的扩展js文件里需要加上如下代码，实现旋转，缩放功能：
 //旋转
        var value = 0;
        log.imgtit.find('a').on('click', function () {
            value += 90;
            log.bigimg.find('img').rotate({ animateTo: value })
        });
        var smallsize = log.bigimg.find('img').height();
        // 放大
        log.imgbar.find('.xubox_imgtit1 a').on('click', function () {
            var standard = log.bigimg.width() > log.bigimg.height() ? log.bigimg.height() : log.bigimg.width();
            if (standard - smallsize >= 100) {
                smallsize += 100;
            } else {
                smallsize = standard;
            }
            AutoResizeImage(smallsize, smallsize, log.bigimg.find('img'));
        })

        //缩小
        log.imgbar.find('.xubox_imgtit2 a').on('click', function () {
            smallsize = log.bigimg.find('img').height();
            if (smallsize > 100) {
                smallsize -= 100;
            }
            AutoResizeImage(smallsize, smallsize, log.bigimg.find('img'));
        })
function changesize(objImg) {
    var img = new Image();

    img.src = objImg.attr('src');
    var most = 200;        //设置最大宽度
    if (img.width > most) {
        var scaling = 1 - (img.width - most) / img.width;

        //计算缩小比例
        objImg.css({  img.width * scaling, height: img.height * scaling });
        //img元素没有设置高度时将自动等比例缩小

        //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
    }
}
function AutoResizeImage(maxWidth, maxHeight, objImg) {

    var img = new Image();

    img.src = objImg.attr('src');

    var hRatio;

    var wRatio;

    var Ratio = 1;
    var w = img.width;

    var h = img.height;

    wRatio = maxWidth / w;

    hRatio = maxHeight / h;

    if (maxWidth == 0 && maxHeight == 0) {

        Ratio = 1;

    } else if (maxWidth == 0) { //

        if (hRatio < 1)

            Ratio = hRatio;

    } else if (maxHeight == 0) {

        if (wRatio < 1)

            Ratio = wRatio;

    } else if (wRatio < 1 || hRatio < 1) {

        Ratio = (wRatio <= hRatio ? wRatio : hRatio);

    } else {
        Ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }

    if (Ratio < 1) {
        w = w * Ratio;
        h = h * Ratio;
    }
    if (Ratio > 1) {

        w = w * Ratio;

        h = h * Ratio;

    }
    //根据图片大小变化定位图片位置
    var wd = $(window);
    var area1 = (wd.height() > 400 ? wd.height() - 50 : 400);
    if (area1 > h) {
        objImg.css({ top: (area1 - h) / 2 })
    } else {
        objImg.css({ top: (h - area1) / 2 })
    }

    objImg.css({  w, height: h });


}





这是前端代码：




<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <link id="easyuiTheme" href="Content/themes/jquery-easyui/default/easyui.css" rel="stylesheet" />
    <script src="Scripts/jquery-easyui/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="Scripts/datagrid-detailview.js" type="text/javascript"></script>
    <script src="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="Scripts/jquery.media.js" type="text/javascript"></script>
    <script src="Scripts/jwplayer/1.5/jwplayer.js" type="text/javascript"></script>
    <script src="layer/layer.min.js"></script>
    <script src="Scripts/jquery.rotate.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tZPqYVqppsRdOD9ncyGRXsWy"></script>
    <style>
    
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
a,a:hover{ text-decoration:none;}
pre{font-family:'微软雅黑'}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
.imgs img{width:300px;padding:0 30px 30px; cursor:pointer;}

    </style>
</head>
<body>
    <table id="grid1" title="接收文书证据列表" style=" 700px; height: 300px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false, 
                fit:true,
                fitColumns: true, 
                pagination:true,
                pageSize:10">
        <thead>
            <tr>
                <th field="e_tjrdw" width="80">
                    提交人地位
                </th>
                <th field="e_tjrmc" width="100">
                    提交人姓名
                </th>
                <th field="e_wsbt" width="80" align="right">
                    文书名称
                </th>
                <th field="e_wslb" width="80" align="right">
                    类型
                </th>
                <th field="e_nrjzy" width="100" align="right">
                    证据目的
                </th>
                <th field="inserttime" width="110">
                    提交时间
                </th>
            </tr>
        </thead>
    </table>
    <div id="TV_div">
        <div id="container">
        </div>
    </div>
    <div id="certificate_dialog" class="easyui-dialog" style=" 860px; height: 560px;
        padding: 10px 20px; background-color: White" closed="true">
        <form id="certificate_form" method="post">
        <div class="fitem" style="float: left;">
            <a class="media" href="#" id="PDFFile"></a>
        </div>
        </form>
    </div>
    <div id="imgs" class="imgs" style="display: none">
        <img id="img1" src="Content/Images/chrome.png" layer-pname="懒人之家 - 1">
    </div>
    <a id="hupload"></a>
    <script>
        ; !function () {
            layer.use('extend/layer.ext.js', function () {
                //初始加载即调用，所以需放在ext回调里
                layer.ext = function () {
                    layer.photosPage({
                        title: '旋转',
                        id: 100, //相册id，可选
                        parent: '#imgs'
                    });
                };
            });
        } ();
        function getData() {
            var rows = [];
            for (var i = 1; i <= 800; i++) {
                var amount = Math.floor(Math.random() * 1000);
                var price = Math.floor(Math.random() * 1000);
                rows.push({
                    e_tjrdw: '法官' + i,
                    inserttime: $.fn.datebox.defaults.formatter(new Date()),
                    e_tjrmc: '开福区管理员' + i,
                    e_wsbt: "文书证券" + amount + "号",
                    e_wslb: "GT",
                    e_nrjzy: "GT" + i
                });
            }
            return rows;
        }

        function pagerFilter(data) {
            if (typeof data.length == 'number' && typeof data.splice == 'function') {    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid('loadData', data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

        $(function () {
            $('#grid1').datagrid({ view: detailview,
                detailFormatter: function (rowIndex, rowData) {
                    return '<div style="padding:2px"><table id="ddv-' + rowIndex + '"></table></div>';
                },
                onExpandRow: function (index, row) {
                    $('#ddv-' + index).datagrid({

                        singleSelect: true,
                        rownumbers: true,
                        fitColumns: true, //数据列自适应宽度
                        height: 'auto',
                        columns: [[{
                            field: 'c_ssdw',
                            title: '文书名称',
                            align: 'center',
                             100
                        }, {
                            field: 'c_dsrxm',
                            title: '类别',
                            align: 'center',
                             100
                        }, {
                            field: 'c_zjhm',
                            title: '递交时间',
                            align: 'center',
                             200
                        }, {
                            field: 'c_sjhm',
                            title: '文件类型',
                            align: 'center',
                             150
                        }, {
                            field: 'p_password',
                            title: '操作',
                            align: 'center',
                             150
                        }]],
                        onResize: function () {
                            $('#grid1').datagrid('fixDetailRowHeight', index);
                        },
                        onLoadSuccess: function () {
                            setTimeout(function () {
                                $('#grid1').datagrid('fixDetailRowHeight', index);
                            }, 0);
                        }

                    }).datagrid('loadData', getData1());
                },
                loadFilter: pagerFilter
            }).datagrid('loadData', getData());



        });

        function getData1() {
            var rows = [];
            for (var i = 1; i <= 10; i++) {
                var amount = Math.floor(Math.random() * 1000);
                var price = Math.floor(Math.random() * 1000);
                if (i <= 3) {
                    var buttontype = "下载";
                    var fileType = "文档";
                } else if (i > 3 & i <= 6) {
                    buttontype = "浏览";
                    fileType = "PDF";
                } else if (i > 6 & i <= 8) {
                    buttontype = "浏览";
                    fileType = "图片";
                } else if (i == 9) {
                    buttontype = "浏览";
                    fileType = "视频";
                } else {
                    buttontype = "浏览";
                    fileType = "音频";
                }
                rows.push({
                    c_ssdw: fileType,
                    c_zjhm: $.fn.datebox.defaults.formatter(new Date()),
                    c_dsrxm: fileType,
                    c_sjhm: "GT" + amount + "号",
                    p_password: "<a href='#' class='submenu' iconcls='icon-search' onclick='look("" + fileType + "")'><span>" + buttontype + "</span></a>"
                });
            }
            return rows;
        }

        function look(buttontype) {
            if (buttontype == "文档") {
                wdupload123();
            } else if (buttontype == "PDF") {
                lookPDF();
            }
            else if (buttontype == "图片") {
                lookPNG();
            }
            else if (buttontype == "视频" || buttontype == "音频") {
                lookTV();
            }

        }
        //下载文档
        function wdupload123() {
            $.messager.confirm('下载', '此文件无法在线查看，您确认下载文件吗？', function (r) {
                if (r) {
                    $("#hupload").attr("href", "http://192.168.0.100:8093/Media/ddff0b1286b040e88a5f07f591eebff6.flv");
                    document.getElementById("hupload").click();

                }
            });

        }
        //查看PDF
        function lookPDF() {

            $('#PDFFile').media({
                type: 'html',
                 800, height: 490,
                src: "http://192.168.0.100:8099/doc/RECEIVE/f178a5aeee934511b912957635ad0132.pdf"
            });
            $('#certificate_dialog').show().dialog({
                title: '查看PDF',
                closed: false,
                modal: true
            });
        }
        //查看视频
        function lookTV() {
            $("#TV_div").show().dialog({
                title: '查看',
                closed: false,
                modal: true,
                height: 500,
                 670
            });
            var thePlayer = jwplayer("container").setup({
                flashplayer: "Scripts/jwplayer/1.5/player.swf",
                 640,
                height: 460,
                dock: false,
                provider: "http",
                file: "http://192.168.0.100:8093/Media/ddff0b1286b040e88a5f07f591eebff6.flv",
                autostart: true
            });
        }

        function lookPNG() {
            document.getElementById("img1").click();
        }

        //        $(document).ready(function () {
        //            var value2 = 0
        //            $("#img1").rotate({
        //                bind:{
        //         click: function () {
        //             value2 += 90;
        //             $(this).rotate({ animateTo: value2 })
        //         }
        //     }

        //            });
        //});



    </script>
</body>
</html>






 源码，插件包下载：http://i.cnblogs.com/Files.aspx


参考资料来自：（jQuery模拟QQ空间相册点开大图效果）http://www.lanrenzhijia.com/jquery/2855.html


            （jQuery旋转效果）http://www.lanrenzhijia.com/jquery/2790.html


            （js图片等比例缩放）http://blog.snsgou.com/post-397.html


 








        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/JD-XIAOMEI/p/4671117.html