JQuery，JS图片操作（上一张，下一张，旋转，放大，缩小）
1、html代码：我是从数据库获取图片路径。
1 <div id="divprint" align="center"> 2 @{DataTable dt = (DataTable)ViewBag.filedetail;} 3 @{ 4 DataRow dr2 = dt.Rows[0]; 5 <input type="hidden" name="srcId" id="srcId" value="@dr2["ImgId"]" /> 6 <img src="/upload/contract/@dr2["fileSrc"]" id="imgsrc" style="margin:0 auto;width:95%;height:95%"> 7 } 8 9 </div> 10 <div style="position:fixed;bottom:0;margin-left:180px"> 11 12 <a id="before" class="easyui-linkbutton" style="width:80px">上一张</a> 13 <a id="next" class="easyui-linkbutton" style="width:80px">下一张</a> 14 <a id="big" class="easyui-linkbutton" style="width:80px" onclick="ImageSuofang(true)">放大</a> 15 <a id="small" class="easyui-linkbutton" style="width:80px" onclick="ImageSuofang(false)"> 缩小</a> 16 <a id="rotate" class="easyui-linkbutton" style="width:80px">旋转</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 }
