JQuery，JS图片操作（上一张，下一张，旋转，放大，缩小）

1、html代码：我是从数据库获取图片路径。

 <div id="divprint" align="center">
           @{DataTable dt = (DataTable)ViewBag.filedetail;}
           @{
               DataRow dr2 = dt.Rows[0];
               <input type="hidden" name="srcId" id="srcId" value="@dr2["ImgId"]" />
               <img src="/upload/contract/@dr2["fileSrc"]" id="imgsrc" style="margin:0 auto;95%;height:95%">
           }
          
       </div>
       <div style="position:fixed;bottom:0;margin-left:180px">
          
           <a id="before" class="easyui-linkbutton" style="80px">上一张</a>
           <a id="next" class="easyui-linkbutton" style="80px">下一张</a>
           <a id="big" class="easyui-linkbutton" style="80px" onclick="ImageSuofang(true)">放大</a>
           <a id="small" class="easyui-linkbutton" style="80px" onclick="ImageSuofang(false)"> 缩小</a>   
           <a id="rotate" class="easyui-linkbutton" style="80px">旋转</a>
       </div>

2、jquery，js代码（这里是每次点击旋转90度。放大缩小是因为没有做图片会随着窗口变化而变化）

    <script type="text/javascript">
        $(document).ready(function () {
             4             var arraySrc = new Array;
            var index = 0;
            @foreach (DataRow dr in ViewBag.filedetail.Rows)
            {
            <text>
            arraySrc[index] = "@dr["ImgId"],@dr["fileSrc"]";
            index++;
            </text> 
            }

            //上一张
            $("#before").click(function () {
                var srcId = $("#srcId").val();
                for (var i = 0; i < arraySrc.length; i++) {
                    var src = "";
                    var no = 0;
                    if (arraySrc[i].split(',')[0] == srcId) {
                        if (i >= 1) {
                            src = "/upload/contract/" + arraySrc[i - 1].split(',')[1];
                            no = i - 1;
                        } else {
                            src = "/upload/contract/" + arraySrc[i].split(',')[1];
                            no = i;
                        }
                        $("#imgsrc").attr('src', src);
                        $("#srcId").val(no);
                    }
                }
            })
            //下一张
            $("#next").click(function () {
                var srcId = $("#srcId").val();
                for (var i = 0; i < arraySrc.length; i++) {
                    var src = "";
                    var no = 0;
                    if (arraySrc[i].split(',')[0] == srcId) {
                        if (i <= arraySrc.length - 2) {
                            src = "/upload/contract/" + arraySrc[i + 1].split(',')[1];
                            no = i + 1;
                        } else {
                            src = "/upload/contract/" + arraySrc[i].split(',')[1]
                            no = i;
                        }
                        $("#imgsrc").attr('src', src);
                        $("#srcId").val(no);
                    }
                }
            })
            //旋转 
            var num = 0;
            $("#rotate").click(function () {
                num++;
                $("#imgsrc").rotate(num * 90);
            })
          
        });
        //放大缩小
        function ImageSuofang(args) {
            var imgsrc = document.getElementById("imgsrc");
            if (args) {
                imgsrc.width = imgsrc.width * 1.1;
                imgsrc.height = imgsrc.height * 1.1;
            }
            else {
                imgsrc.width = imgsrc.width / 1.1;
                imgsrc.height = imgsrc.height / 1.1;
            }
        }
        
75 76     </script>

3、Controller代码：js里 filedetail 的数据来源

 public ActionResult DeviceEnclosureImgSeeForm()
        {
            FADeviceEnclosureModel DeviceEnclosureModel = new FADeviceEnclosureModel();
            FADeviceEnclosure detail = DeviceEnclosureModel.Detail(int.Parse(Request["DeviceEnclosureId"]));
            if (detail == null)
                return Content("<script >alert('找不到信息！');window.parent.location.reload();</script >", "text/html");

            DataTable dt = new DataTable();
            dt.Columns.Add("ImgId");
            dt.Columns.Add("fileSrc");
            string[] DeviceEnclosureFileList = detail.DeviceEnclosureFile.Split(';');

            for (int i = 0; i < DeviceEnclosureFileList.Length; i++)
            {
                DataRow dr = dt.NewRow();
                dr["ImgId"] = i;
                dr["fileSrc"] = DeviceEnclosureFileList[i].ToString();
                dt.Rows.Add(dr);
            }

            ViewData["filedetail"] = dt;

            return View();
        }