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

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

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

     <script type="text/javascript">
$(document).ready(function () {
var arraySrc = new Array;
var index = ;
@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 = ; i < arraySrc.length; i++) {
var src = "";
var no = ;
if (arraySrc[i].split(',')[] == srcId) {
if (i >= ) {
src = "/upload/contract/" + arraySrc[i - ].split(',')[];
no = i - ;
} else {
src = "/upload/contract/" + arraySrc[i].split(',')[];
no = i;
}
$("#imgsrc").attr('src', src);
$("#srcId").val(no);
}
}
})
//下一张
$("#next").click(function () {
var srcId = $("#srcId").val();
for (var i = ; i < arraySrc.length; i++) {
var src = "";
var no = ;
if (arraySrc[i].split(',')[] == srcId) {
if (i <= arraySrc.length - ) {
src = "/upload/contract/" + arraySrc[i + ].split(',')[];
no = i + ;
} else {
src = "/upload/contract/" + arraySrc[i].split(',')[]
no = i;
}
$("#imgsrc").attr('src', src);
$("#srcId").val(no);
}
}
})
//旋转
var num = ;
$("#rotate").click(function () {
num++;
$("#imgsrc").rotate(num * );
}) });
//放大缩小
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;
}
} </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 = ; 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();
}

最新文章

  1. C#区分多态和重载-delphi也类似
  2. VS与ultraedit 正则表达式替换
  3. 当子查询碰上NULL
  4. pywebsocket的搭建
  5. iOS 初级数据持久化
  6. FileObverse文件观察者的Debug报告
  7. elasticsearch学习一、安装和配置
  8. openstack之neutron linuxbridge + vlan组网
  9. 简述负载均衡&amp;CDN技术(转)
  10. Vue2.0音乐播放器
  11. .NET 二维码生成(ThoughtWorks.QRCode)【转发jiangys】
  12. 关于React Native 安卓首屏白屏优化
  13. OTA和Recovery系统升级流程介绍
  14. 新手PHP连接MySQL数据库出问题(Warning: mysqli_connect(): (HY000/1045): Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES))
  15. Confluence 6 Windows 中以服务方式自动重启的原因
  16. hive 元数据库表描述
  17. 一定要知道的,那些Linux操作命令
  18. jQuery 小特效【文本框折叠隐藏,展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】
  19. MVC开发中的常见错误-07-“System.IO.DirectoryNotFoundException”类型的未经处理的异常在 mscorlib.dll 中发生
  20. [others] 一个酷酷的站

热门文章

  1. Linux的命名空间
  2. js 中typeof 检测数据类型的时候需要注意的小细节
  3. 6.1_springboot2.x分布式-整合SpringCloud
  4. react 中刷新,路由传参数丢失不存在了?
  5. SDL系列之 - 用画直线的方法来画正弦曲线
  6. python--模块导入与执行
  7. D3.js 弦生成器(V3版本)
  8. Vue之自建管理后台(三)登录页面
  9. 15_TLB中的G属性
  10. could not load the tomcat server configuration ...