图片浏览 h5
@{
Layout = null;
}
<html>
<head>
<script type="text/javascript" src="~/scripts/jquery-1.10.2.min.js"></script>
<meta name="viewport" content="width=device-width,height=device-height, minimum-scale=0.1">
<style>
img {
text-align: center;
position: absolute;
margin: auto;
top: ;
right: ;
bottom: ;
left: ;
}
.overflowingVertical {
cursor: zoom-out;
}
.shrinkToFit {
cursor: zoom-in;
}
body {
background-color: #;
color: #eee;
margin: ;
}
</style>
</head>
<body>
<img src="@ViewBag.PicURL" alt="@ViewBag.PicURL" onload="initImg();" />
<script>
function initImg() {
drawImage($("img"), document.body.clientWidth, document.body.clientHeight);
}
function drawImage(ImgD, FitWidth, FitHeight) {
var image = new Image();
image.src = ImgD.attr("src");
if (image.width > && image.height > ) {
if (image.width / image.height >= FitWidth / FitHeight) {
if (image.width > FitWidth) {
ImgD.css("width", FitWidth);
ImgD.css("height", (image.height * FitWidth) / image.width);
$("img").attr("class", "shrinkToFit");
ImgD.css("margin-top", );
} else {
ImgD.css("width", image.width);
ImgD.css("height", image.height);
}
} else {
if (image.height > FitHeight) {
ImgD.css("height", FitHeight);
ImgD.css("width", (image.width * FitHeight) / image.height);
$("img").attr("class", "shrinkToFit");
ImgD.css("margin-top", );
} else {
ImgD.css("width", image.width);
ImgD.css("height", image.height);
}
}
}
}
$("img").mousedown(function () {
if (typeof $(this).attr("class") != "undefined") {
$(this).toggleClass("shrinkToFit overflowingVertical");
if ($(this).hasClass("overflowingVertical")) {
var img = new Image();
img.src = $(this).attr("src");
var imgWidth = img.width; //图片实际宽度
var imgHeight = img.height; //图片实际高度
drawImage($(this), imgWidth, imgHeight);
}
if ($(this).hasClass("shrinkToFit")) {
drawImage($("img"), document.body.clientWidth, document.body.clientHeight);
}
}
});
</script>
</body>
</html>
后台：
/// <summary>
/// 图片自适应居中打开，非图片浏览器下载
/// </summary>
/// <param name="dirRelativePath">文件路径，包含文件名</param>
/// <param name="fileName">文件名</param>
/// <returns></returns>
public ActionResult OpenPicture(string dirRelativePath, string fileName)
{
Regex regex = new Regex(@"\.jpg|\.bmp|\.png|\.gif|\.tiff");
fileName = fileName.ToLower();
var isMatch = regex.IsMatch(fileName);
//图片
if (isMatch)
{
ViewBag.PicURL = "/Home/DownLoad?dirRelativePath=" + dirRelativePath + "&fileName=" + fileName;
}
else
{
return RedirectToAction("DownLoad", "Home", new { dirRelativePath = dirRelativePath, fileName = fileName });
}
return View();
}
/// <summary>
/// 下载附件
/// </summary>
/// <param name="dirRelativePath"></param>
/// <param name="fileName"></param>
/// <returns></returns>
public ActionResult DownLoad(string dirRelativePath, string fileName)
{ string uploadPath = System.Configuration.ConfigurationManager.AppSettings["BPMAttachments"];
string dirAbsolutePath = uploadPath + dirRelativePath; if (!System.IO.File.Exists(dirAbsolutePath))
{
return Content("提示：文件在磁盘上不存在");
}
//HttpContext.Response.AddHeader("content-disposition", "attachment;filename=" + fileName);
//return File(dirAbsolutePath, "application/octet-stream");
var contentType = MimeMapping.GetMimeMapping(fileName);
HttpContext.Response.AddHeader("content-disposition", "inline;filename=" + fileName);
return File(dirAbsolutePath, contentType);
}
图片浏览 h5的更多相关文章
- 图片浏览（CATransition）转场动画
Main.storyboard ViewController.m // // ViewController.m // 8A04.图片浏览(转场动画) // // Created by huan ...
- Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览
1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...
- 用CSS和第三方库来提升图片浏览体验
你是否关注过浏览.点击图片这个微妙的过程,不同的图片展现.交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验. 先看下Pinterest.Flickr等时下 ...
- 第17讲- UI常用组件之ImageView图片浏览
第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...
- [置顶] ios 一个不错的图片浏览分享框架demo
demo功能:一个不错的图片浏览分享框架demo.iphone6.1 测试通过.可以浏览图片,保存,微博分享到新浪,腾讯,网易,人人等. 注:(由于各个微博的接口有时候会有调整,不一定能分享成功.只看 ...
- WPF 图片浏览 伪3D效果
原文:WPF 图片浏览 伪3D效果 首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...
- Ubuntu下几个命令行方式使用的图片浏览工具
想找几个Ubuntu下可以以命令行方式使用的图片浏览工具. Google了一些资料,找到下面几个web: 1.pho:轻巧的命令行图片查看器 其中介绍了工具pho,其功能特点,见下面的转帖内容: ph ...
- 【MVC】快速构建一个图片浏览网站
当抄完MusicStore时,你应该对MVC有一个比较清晰的认识了.接下来就需要做个网站来继续增加自己的知识了.那么,该做个什么网站呢.做个图片浏览网站吧,简单而实用. 简单设计 1.首先,页面中间是 ...
- iOS Swift WisdomScanKit二维码扫码SDK，自定义全屏拍照SDK，系统相册图片浏览，编辑SDK
iOS Swift WisdomScanKit 是一款强大的集二维码扫码,自定义全屏拍照,系统相册图片编辑多选和系统相册图片浏览功能于一身的 Framework SDK [1]前言: 今天给大家 ...
随机推荐
- sublime使用总结
上周忙呀忙~ 周一到五在忙项目,周六日搬家 在帝都平均一年就要换一次房子,从开始找房子到成功住进去前前后后大约花了半个多月的时间 什么时候就有自己的小窝了-- 之前开发一直用的都是W ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- 51nod_1490: 多重游戏（树上博弈）
题目链接 该题实质上是一个树上博弈的问题.要定义四种状态--2先手必胜 1先手必败 3可输可赢 0不能控制 叶子结点为先手必胜态: 若某结点的所有儿子都是先手必败态,则该结点为先手必胜态: 若某结点的 ...
- 如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
- [转]从入门到精通: 最小费用流的“zkw算法”
>>>> 原文地址:最小费用流的“zkw算法” <<<< 1. 网络流的一些基本概念 很多同学建立过网络流模型做题目, 也学过了各种算法, 但是对于基本 ...
- 苹果APP发布
1 发布方式 苹果发布上架有两种方式,一种是上传到苹果商店,一种是挂在web服务器上扫描下载,下面分别介绍这两种发布方式 1.1 上传AppStore 1. 用公司账号或者个人开发账号生成上架.p12 ...
- 国内网站遭遇SYN攻击事如何及时解决问题
1.SYN/ACK Flood攻击:这种攻击方法是经典最有效的DDOS方法,可通杀各种系统的网络服 务,主要是通过向受害主机发送大量伪造源IP和源端口的SYN或ACK包,导致主机的缓存资源被耗 尽或忙 ...
- 【CSS3】块级元素与行内元素的区别
一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...
- 小白读iOS冗余资源扫描脚本
随着公司项目的不断功能迭代,项目的体积越来越大,各种瘦身策略迫在眉睫.由于平时使用Linux高级命令和 shell脚本的机会不多,之前学的知识一下子想起来很难.所有趁着这次看脚本,重新温习一下. 本文 ...
- JAVA多线程之wait/notify
本文主要学习JAVA多线程中的 wait()方法 与 notify()/notifyAll()方法的用法. ①wait() 与 notify/notifyAll 方法必须在同步代码块中使用 ②wait ...