图片查看器（缩放拖动）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.container {
position: relative;
width: 600px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}

.container:hover .img-title {
margin-top: -503px;
}

.img-title {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 1;
transition: .5s;
}

.title-con {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}

.title-opr {
width: 40px;
height: 40px;
cursor: pointer;
}

.zoomImg {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 10;
}

.imgMain {
position: relative;
top: 50%;
left: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%);
}

.imgMains {
width: 160px;
height: 160px;
overflow: auto;
}
</style>

</head>

<body>

$.fn.extend({
liusZoomOpt: {
//图片的样式
lisuImgStyle: 'height:50%;position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor:move; padding: 4px;background-color: #fff;border: 1px solid #ddd; border-radius: 4px;user-select: none;',
lisuMove: false, //移动标记
lisuX: "",
lisuY: "", //鼠标离控件左上角的相对位置
imgIndex: 0, //当前显示的图片的索引
liusTarget: null //放大的图片dom
},
//点击图片放大
zoomEparkImg: function() {
var that = this;
$(this).on("click", function(event) {
if($(event.target).closest("#lisuZoomImg").length != 0) return;
//判断图片是否存在
var lisuImgSrc = $(this).prop("src");
//图片路径错误
if(!that.lisuHasImgSrc(lisuImgSrc)) return;
that.liusZoomOpt.liusTarget.setAttribute("style", that.liusZoomOpt.lisuImgStyle);
that.liusZoomOpt.liusTarget.setAttribute("src", lisuImgSrc);
$("body").find("#lisuZoomImg").fadeIn();
});
},
initZoomImg: function() {
this.liusZoomOpt.imgIndex = 0;
//添加放大的事件
this.zoomEparkImg();
//创建显示组件
this.lisuCreateDom();
//初始化缩放事件(通过缩放图片本身以及遮罩层)
this.changeImgType(document.getElementById("lisuImg"));
this.changeImgType(document.getElementById("lisuZoomImg"));
},
//判断图片路径是否正确
lisuHasImgSrc: function(pathImg) {
var ImgObj = new Image();
ImgObj.src = pathImg;
if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0))
return true;
else
return false;
},
changeImgType: function(dom) {
var that = this;
this.domMouseWheelEvent()(dom, "mousewheel", function(event) {
if(event.delta > 0) that.lisuChangeImgSize(true, that); // 上放大
else that.lisuChangeImgSize(false, that); //下缩小
});
},
//创建显示图片的dom
lisuCreateDom: function(imgSrc) {
var that = this;
//判断是否已经存在
if($("body").find("#lisuZoomImg").length == 0) {
var thisStyle = 'display:none;position: fixed;width: 100%;height: 100%;top: 0;eft: 0;background-color: rgba(0, 0, 0, .5);z-index: 5000',
lisuOPClose = "width:30px;height:30px;position:absolute;top:30px;left:100%;margin-left:-100px;z-index:5001;cursor:pointer;user-select: none;",
lisuOPReduce = "width:30px;height:30px;position:absolute;top:100px;left:100%;margin-left:-100px;z-index:5001;cursor:pointer;user-select: none;",
lisuHtml = '<div id="lisuZoomImg" style="' + thisStyle + '"> <img src="img/lisuClose.png" style="' + lisuOPClose + '" alt="关闭" title="关闭"/> <img src="img/lisuReduction.png" class="lisuREduce" style="' + lisuOPReduce + '" alt="还原" title="还原"/><img src="' + imgSrc + '" id="lisuImg" style="' + this.liusZoomOpt.lisuImgStyle + '" /></div>';
$("body").append(lisuHtml);
//拖拽事件
$("body #lisuImg").lisuDraggable();
} else {
$("body").find("#lisuImg").prop("src", imgSrc);
}
//点击遮罩层关闭
$("body").find("#lisuZoomImg").on("click", function(event) {
if($(event.target).closest("#lisuImg").length == 0) $("body").find("#lisuZoomImg").fadeOut(200);
});
//还原
$("body").find(".lisuREduce").on("click", function(event) {
that.lisuStopEvent(event);
document.getElementById("lisuImg").setAttribute("style", that.liusZoomOpt.lisuImgStyle);

});
that.liusZoomOpt.liusTarget = $("body").find("#lisuImg")[0];

}, //修改图片的大小[true 放大 fale缩小]
lisuChangeImgSize: function(type, that) {
if($("body").find("#lisuImg").length == 0) return;
var lisuClientW = parseInt(that.liusZoomOpt.liusTarget.width),
lisuClientH = parseInt(that.liusZoomOpt.liusTarget.height);
if(!type && lisuClientW * 0.95 < 100) return;
this.liusZoomOpt.liusTarget.style.width = (type ? lisuClientW * 1.05 : lisuClientW * 0.95) + "px";
this.liusZoomOpt.liusTarget.style.height = (type ? lisuClientH * 1.05 : lisuClientH * 0.95) + "px";
},
//mouserwheel事件兼容火狐
lisuMouseWheel: function(event) {
var type = event.type;
if(type === 'DOMMouseScroll' || type === 'mousewheel')
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0);
if(event.srcElement && !event.target)
event.target = event.srcElement;
if(!event.preventDefault && event.returnValue !== undefined) {
event.preventDefault = function() {
event.returnValue = false;
}
}
return event;
},
//鼠标滚轮事件
domMouseWheelEvent: function(dom, type, fn) {
var that = this;
if(window.addEventListener) {
return function(el, type, fn, capture) {
if(type === 'mousewheel' && document.mozFullScreen !== undefined) type = "DOMMouseScroll";
el.addEventListener(type, function(event) {
fn.call(this, that.lisuMouseWheel(event));
}, capture || false);
}
} else if(window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(event) {
event = event || window.event;
fn.call(el, that.lisuMouseWheel(event));
});
}
}
},
// 拖拽的方法
lisuDraggable: function() {
var that = this;
$(this).mousedown(function(event) {
that.lisuStopEvent(event);
that.liusZoomOpt.lisuMove = true;
that.liusZoomOpt.lisuX = event.pageX - parseInt($(this).css("left"));
that.liusZoomOpt.lisuY = event.pageY - parseInt($(this).css("top"));

});
$(document).mousemove(function(event) {
that.lisuStopEvent(event);
//移动
if(that.liusZoomOpt.lisuMove) {
console.log("可以");
$(that).css({
top: (event.pageY - that.liusZoomOpt.lisuY),
left: (event.pageX - that.liusZoomOpt.lisuX)
});
//移动时改变透明度
$(that)[0].style.opacity = "0.5";

}
}).mouseup(function(event) {
that.liusZoomOpt.lisuMove = false;
$(that).fadeTo(20, 1);
that.lisuStopEvent(event);
});

},
//阻止冒泡浏览器默认行为
lisuStopEvent: function(event) {
var event = event || window.event;
//阻止冒泡
if(event.stopPropagation) event.stopPropagation();
else　 window.event.cancelBubble = true;
//取消默认事件（避免跟mouseup冲突）
if(event.preventDefault) event.preventDefault();
else window.event.returnValue = false;
}
});
//初始化图片放大
$("img").initZoomImg();

function addImg() {
$("#dddd").append('<img src="//gw.alicdn.com/bao/uploaded/i2/TB1kwtHQpXXXXb_aXXXXXXXXXXX_!!0-item_pic.jpg" class="imgMains" data-name="好" />');
$("img").initZoomImg();
}
</script>
</body>

</html>

发表于 2018-08-03 14:03 Wowo丶阅读(539) 评论(0) 编辑收藏举报

图片查看器（缩放 拖动）