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

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

 1  <div  align="center">
 2            @{DataTable dt = (DataTable)ViewBag.filedetail;}
 3            @{
 4                DataRow dr2 = dt.Rows[0];
 5                <input type="hidden" name="srcId"  value="@dr2["ImgId"]" />
 6                <img src="/upload/contract/@dr2["fileSrc"]"  >
 7            }
 8           
 9        </div>
10        <div >
11           
12            <a  class="easyui-linkbutton" >上一张</a>
13            <a  class="easyui-linkbutton" >下一张</a>
14            <a  class="easyui-linkbutton"  onclick="ImageSuofang(true)">放大</a>
15            <a  class="easyui-linkbutton"  onclick="ImageSuofang(false)"> 缩小</a>   
16            <a  class="easyui-linkbutton" >旋转</a>
17        </div>

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

 1     <script type="text/javascript">
 2         $(document).ready(function () {
 3              4             var arraySrc = new Array;
 5             var index = 0;
 6             @foreach (DataRow dr in ViewBag.filedetail.Rows)
 7             {
 8             <text>
 9             arraySrc[index] = "@dr["ImgId"],@dr["fileSrc"]";
10             index++;
11             </text> 
12             }
13 
14             //上一张
15             $("#before").click(function () {
16                 var srcId = $("#srcId").val();
17                 for (var i = 0; i < arraySrc.length; i++) {
18                     var src = "";
19                     var no = 0;
20                     if (arraySrc[i].split(',')[0] == srcId) {
21                         if (i >= 1) {
22                             src = "/upload/contract/" + arraySrc[i - 1].split(',')[1];
23                             no = i - 1;
24                         } else {
25                             src = "/upload/contract/" + arraySrc[i].split(',')[1];
26                             no = i;
27                         }
28                         $("#imgsrc").attr('src', src);
29                         $("#srcId").val(no);
30                     }
31                 }
32             })
33             //下一张
34             $("#next").click(function () {
35                 var srcId = $("#srcId").val();
36                 for (var i = 0; i < arraySrc.length; i++) {
37                     var src = "";
38                     var no = 0;
39                     if (arraySrc[i].split(',')[0] == srcId) {
40                         if (i <= arraySrc.length - 2) {
41                             src = "/upload/contract/" + arraySrc[i + 1].split(',')[1];
42                             no = i + 1;
43                         } else {
44                             src = "/upload/contract/" + arraySrc[i].split(',')[1]
45                             no = i;
46                         }
47                         $("#imgsrc").attr('src', src);
48                         $("#srcId").val(no);
49                     }
50                 }
51             })
52             //旋转 
53             var num = 0;
54             $("#rotate").click(function () {
55                 num++;
56                 $("#imgsrc").rotate(num * 90);
57             })
58           
59         });
60         //放大缩小
61         function ImageSuofang(args) {
62             var imgsrc = document.getElementById("imgsrc");
63             if (args) {
64                 imgsrc.width = imgsrc.width * 1.1;
65                 imgsrc.height = imgsrc.height * 1.1;
66             }
67             else {
68                 imgsrc.width = imgsrc.width / 1.1;
69                 imgsrc.height = imgsrc.height / 1.1;
70             }
71         }
72         
73 75 76     </script>

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

 1  public ActionResult DeviceEnclosureImgSeeForm()
 2         {
 3             FADeviceEnclosureModel DeviceEnclosureModel = new FADeviceEnclosureModel();
 4             FADeviceEnclosure detail = DeviceEnclosureModel.Detail(int.Parse(Request["DeviceEnclosureId"]));
 5             if (detail == null)
 6                 return Content("<script >alert('找不到信息！');window.parent.location.reload();</script >", "text/html");
 7 
 8             DataTable dt = new DataTable();
 9             dt.Columns.Add("ImgId");
10             dt.Columns.Add("fileSrc");
11             string[] DeviceEnclosureFileList = detail.DeviceEnclosureFile.Split(';');
12 
13             for (int i = 0; i < DeviceEnclosureFileList.Length; i++)
14             {
15                 DataRow dr = dt.NewRow();
16                 dr["ImgId"] = i;
17                 dr["fileSrc"] = DeviceEnclosureFileList[i].ToString();
18                 dt.Rows.Add(dr);
19             }
20 
21             ViewData["filedetail"] = dt;
22 
23             return View();
24         }