<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../jquery.min.js"></script>
<style>
</style>
</head>
<body >
<div id="a" style="width:700px;height:600px;border:1px solid green;">
<div id="id_document_img_root" style="position: relative; height: 100%;width: 100%;">
<div class="id_document_img-viewer-container" style="width: 100%; height: 100%; overflow: hidden; position: absolute;">
<div class="id_document_img-viewer-canvas" style="position: absolute; ">
<div id="id_document_img_container" style="position: absolute; transform: scale(1);">
<img id='id_document_img_img' style="position: absolute;width: auto; height: auto; display: block;"/>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
/*
* 當鼠標按住時，需要實現圖紙隨之鼠標移動
* 這個屬性記錄當前是否屬於圖紙拖動狀態
*/
var svg_distinguish_isDrag = false;//是否開始拖動圖紙 【false 不拖拽】
// 拖動圖紙專用變量 ，拖動圖紙時的點的座標
var svg_distinguish_disX,svg_distinguish_disY;//圖片相對於圖片的位置
/**
* 包裹圖片的各類id
* @type {null}
*/
var imageId4Root = null;
var imageId4Container = null;
var imageId4Img = null;
/**
* @note 是否初始化過一次
* @description 針對只需要初始化一次的功能，這個參數很重要，故是全局參數
* @type {boolean}
*/
var initialized = false;
//這裏是寫死的，因爲沒必要是動態的
var rootId = "id_document_img"
/**
* DwgViewer
*
* @param {object} 圖片渲染的實體
* @constructor
*/
function ImageViewer(url,elementId,callback) {
this.url = url;
//獲取外框的尺寸
var width4Panel = $("#"+elementId).width();
var height4Panel = $("#"+elementId).height();
// 外框邊界的座標，獲取頁面某一元素的絕對X,Y座標
var minx = $('#'+elementId).offset().left;
var miny = $('#'+elementId).offset().top;
//alert(minx+"--"+miny);
var maxx = minx+width4Panel;
var maxy = miny+height4Panel;
//必須預留出一片空白區域，不然拖動的狀態(svg_distinguish_isDrag)無法監聽到了
minx = minx+20;
miny = miny+20;
maxx = maxx-20;
maxy = maxy-20;
//alert(maxx+"--"+maxy);
//追加html.只初始化一次
imageId4Root = rootId+"_root";
imageId4Container = rootId+"_container";
imageId4Img = rootId+"_img";
//console.log(width4Panel+"---"+height4Panel);
//圖片加載後，自動居中
$('#'+imageId4Img).on("load",function () {
var imgWidth = $('#'+imageId4Img).width();
var imgHeight = $('#'+imageId4Img).height();
var centerTop = (height4Panel-imgHeight)/2;
var centerLeft = (width4Panel-imgWidth)/2;
$("#"+imageId4Img).css({
top:centerTop,
left:centerLeft
});
//回調
callback();
});
$('#'+imageId4Img).attr("src",url);
/*
* 綁定滾輪和右擊事件
*/
var imgRoot = document.getElementById(imageId4Root);
var image_container = document.getElementById(imageId4Container);
if(document.addEventListener){
//js添加鼠標滾輪監聽事件
imgRoot.addEventListener('DOMMouseScroll',img_scrollFunc,false);
//鼠標右擊
imgRoot.addEventListener('contextmenu',svg_distinguish_contextmenuFunc);
}
imgRoot.onmousewheel = img_scrollFunc;
//初始化移動事件
init_img_moveFunc(imgRoot,image_container,{minx:minx,miny:miny,maxx:maxx,maxy:maxy});
/**
* 空格綁定P&ID圖紙復位功能
*/
if(!initialized){
$(document).keydown(function(e) {
if (e.which === 32) {
this.zoomExtents();
}
});
initialized = true;
}
}
/**
* @note 復位功能（沒想好咋實現？？？）
*/
ImageViewer.prototype.zoomExtents = function() {
}
/**
* 綁定鼠標移動事件
* @param event
*/
function init_img_moveFunc(imgRoot,image_container,borderPosition) {
//鼠標按下時
image_container.onmousedown = function(e){
svg_distinguish_isDrag = true;
this.style.cursor = 'pointer';//move
e = e||window.event;//兼容性寫法
e.preventDefault();
//鼠標位置
var x = e.clientX;
var y = e.clientY;
//鼠標相對於圖片的位置
svg_distinguish_disX = x-this.offsetLeft;
svg_distinguish_disY = y-this.offsetTop;
}
//鼠標移動時
imgRoot.onmousemove = function(e){
e = e || window.event;//兼容性寫法
e.preventDefault();
//鼠標位置
var x = e.clientX;
var y = e.clientY;
console.log('x:'+x+',y:'+y);
if(svg_distinguish_isDrag){
if(x>borderPosition.minx && x<borderPosition.maxx && y>borderPosition.miny && y<borderPosition.maxy){
//修改圖片位置
image_container.style.left = x - svg_distinguish_disX + 'px';
image_container.style.top = y - svg_distinguish_disY + 'px';
}else{
svg_distinguish_isDrag = false;
}
}
}
//鼠標擡起時
imgRoot.onmouseup = function(e) {
e = e||window.event;//兼容性寫法
e.preventDefault();
svg_distinguish_isDrag = false;
image_container.style.cursor = 'default';
}
}
/**
* 綁定滾輪事件
*/
function img_scrollFunc(event){
event = event ||window.event;//兼容性寫法
event.preventDefault();
var image_container = document.getElementById(imageId4Container);
var endIndex = image_container.style.transform.length - 1;
var currentScale = image_container.style.transform.slice(6, endIndex);
currentScale = Number(currentScale);
var x = event.clientX;
var y = event.clientY;
//鼠標相對於圖片的位置
var disX = x-image_container.offsetLeft;
var disY = y-image_container.offsetTop;
var _scale = null;
if(event.wheelDeltaY > 0){
// 滾輪上滾放大
_scale = currentScale + 0.01;
}else{
// 滾輪下滾縮小
_scale = currentScale - 0.01;
}
_scale = _scale.toFixed(2);
if(_scale - 0.1 <= 0){
return false
}
var prop = _scale / currentScale;
var currentLeft = x - disX*prop;
var currentTop = y - disY*prop;
image_container.style.transform = "scale("+ _scale +")";
$("#"+imageId4Container).css('left', currentLeft).css('top', currentTop);
}
/**
* 右擊事件
* @param event
* @returns
*/
function svg_distinguish_contextmenuFunc(event){
event = event ||window.event;//兼容性寫法
event.preventDefault();
console.log("left: "+event.pageX+";"+"top: "+event.pageY);
// $('#id_result4Relation_pipelines_menu').menu('show', {
// left: event.pageX + "px",
// top: event.pageY + "px"
// });
}
function showErrorMessage(msg) {
alert(msg);
}
ImageViewer("./image/1.jpg","a",function(){
});
</script>
</html>
圖片和jquery.js就不貼了。
這個案例都用的最基礎的代碼。複用率高。備份下
不過還是希望做成插件或者有現成的插件能提供在線預覽圖片的諸多功能，畢竟不想重複發明輪子。
如果有大蝦瞭解功能強大又方便定製的圖片預覽，希望能告留言我）。
Viewer.js就不用提了，強大到有些難上手了。