137 lines
5.0 KiB
Plaintext
137 lines
5.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>图片预览</title>
|
|
<script src="~/Content/jquery/jquery.min.js"></script>
|
|
<style>
|
|
html,body
|
|
{
|
|
overflow: hidden;
|
|
}
|
|
div {
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: -1;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div img {
|
|
position: absolute;
|
|
width: 98%;
|
|
cursor: move;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<input type="hidden" id="fileId" value="@ViewBag.fileId" />
|
|
<div id="div" onmousewheel="return bbimg(this)"><img id="img" /></div>
|
|
<script language="javascript">
|
|
$(function () {
|
|
var fileId = $("#fileId").val();
|
|
$("#img").attr("src", "/LR_SystemModule/Annexes/PreviewFile?fileId=" + fileId);
|
|
})
|
|
var params = {
|
|
zoomVal: 1,
|
|
left: 0,
|
|
top: 0,
|
|
currentX: 0,
|
|
currentY: 0,
|
|
flag: false
|
|
};
|
|
//图片缩放
|
|
function bbimg(o) {
|
|
var o = o.getElementsByTagName("img")[0];
|
|
params.zoomVal += event.wheelDelta / 1200;
|
|
if (params.zoomVal >= 0.2) {
|
|
o.style.transform = "scale(" + params.zoomVal + ")";
|
|
} else {
|
|
params.zoomVal = 0.2;
|
|
o.style.transform = "scale(" + params.zoomVal + ")";
|
|
return false;
|
|
}
|
|
}
|
|
//获取相关CSS属性
|
|
var getCss = function (o, key) {
|
|
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
|
|
};
|
|
//拖拽的实现
|
|
var startDrag = function (bar, target, callback) {
|
|
if (getCss(target, "left") !== "auto") {
|
|
params.left = getCss(target, "left");
|
|
}
|
|
if (getCss(target, "top") !== "auto") {
|
|
params.top = getCss(target, "top");
|
|
}
|
|
//o是移动对象
|
|
bar.onmousedown = function (event) {
|
|
params.flag = true;
|
|
if (!event) {
|
|
event = window.event;
|
|
//防止IE文字选中
|
|
bar.onselectstart = function () {
|
|
return false;
|
|
}
|
|
}
|
|
var e = event;
|
|
params.currentX = e.clientX;
|
|
params.currentY = e.clientY;
|
|
};
|
|
document.onmouseup = function () {
|
|
params.flag = false;
|
|
if (getCss(target, "left") !== "auto") {
|
|
params.left = getCss(target, "left");
|
|
}
|
|
if (getCss(target, "top") !== "auto") {
|
|
params.top = getCss(target, "top");
|
|
}
|
|
};
|
|
document.onmousemove = function (event) {
|
|
var e = event ? event : window.event;
|
|
if (params.flag) {
|
|
var nowX = e.clientX, nowY = e.clientY;
|
|
var disX = nowX - params.currentX, disY = nowY - params.currentY;
|
|
target.style.left = parseInt(params.left) + disX + "px";
|
|
target.style.top = parseInt(params.top) + disY + "px";
|
|
if (typeof callback == "function") {
|
|
callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
|
|
}
|
|
if (event.preventDefault) {
|
|
event.preventDefault();
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
startDrag(document.getElementById("img"), document.getElementById("img"))
|
|
|
|
function AutoSize(Img, maxWidth, maxHeight) {
|
|
var image = new Image();
|
|
//原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
|
|
image.src = Img.src;
|
|
// 当图片比图片框小时不做任何改变
|
|
if (image.width < maxWidth && image.height < maxHeight) {
|
|
Img.width = image.width;
|
|
Img.height = image.height;
|
|
}
|
|
else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放
|
|
{
|
|
if (maxWidth / maxHeight <= image.width / image.height) //原图片宽高比例 大于 图片框宽高比例
|
|
{
|
|
Img.width = maxWidth; //以框的宽度为标准
|
|
Img.height = maxWidth * (image.height / image.width);
|
|
}
|
|
else { //原图片宽高比例 小于 图片框宽高比例
|
|
Img.width = maxHeight * (image.width / image.height);
|
|
Img.height = maxHeight; //以框的高度为标准
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|