图片查看-优快云博客

本文链接：https://blog.youkuaiyun.com/cloudgamer/article/details/1758860

本文介绍了一个简单的图片查看器实现方案，使用HTML与JavaScript构建。该查看器支持图片加载、缩放、滚动等功能，并能通过鼠标滚轮进行平滑的放大与缩小操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var isIE = (document.all) ? true : false;

function Event(e){

var oEvent = isIE ? window.event : e;

if(isIE){

oEvent.preventDefault = function () {

this.returnValue = false;

};

oEvent.pageX = oEvent.clientX;

oEvent.pageY = oEvent.clientY;

oEvent.detail = oEvent.wheelDelta / (-40);

}

return oEvent;

}

function addEventHandler(oTarget, sEventType, fnHandler) {

if (oTarget.addEventListener) {

oTarget.addEventListener(sEventType, fnHandler, false);

} else if (oTarget.attachEvent) {

oTarget.attachEvent("on" + sEventType, fnHandler);

} else {

oTarget["on" + sEventType] = fnHandler;

}

};

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

var PicView = Class.create();

PicView.prototype = {

initialize: function(idDiv, iWidth, iHeight) {

var oPicView = this, oDiv = document.getElementById(idDiv);

iWidth = iWidth > 0 ? iWidth : 100;

iHeight = iHeight > 0 ? iHeight : 100;

//div设置

oDiv.style.filter = "Alpha(100)";//为了去掉ie的预览功能

oDiv.style.cursor = "pointer";

oDiv.style.overflow = "hidden";

oDiv.align = "center";

oDiv.style.width = iWidth + "px";

oDiv.style.height = iHeight + "px";

this.oDiv = oDiv;

this.iDiffX = 0;

this.iDiffY = 0;

this.timer = null;

this.isDrag = false;

this.DefaultWidth = iWidth;

this.DefaultHeight = iHeight;

if (isIE){

oDiv.ondrag = function(){ return false; };

oDiv.onmousewheel = function(){ oPicView.MouseCtrl(); };

} else { addEventHandler(oDiv, "DOMMouseScroll", function(e){ oPicView.MouseCtrl(e); }); };

oDiv.onmousedown = function(e){ oPicView.MouseDown(e); return false; };

addEventHandler(document.body, "mousemove", function(e){ oPicView.MouseMove(e); });

addEventHandler(document.body, "mouseup", function(){ oPicView.MouseUp(); });

//载入图片

Load: function(sUrl){

var oPicView = this, oDiv = this.oDiv, oImg = document.createElement("img");

if (this.oImg) oDiv.removeChild(this.oImg);

this.oImg = oImg;

this.iChange = 0;

oDiv.style.paddingTop = "0px";

oDiv.style.height = this.DefaultHeight + "px";

oDiv.scrollTop = oDiv.scrollLeft = 0;

oImg.onload = function(){

oPicView.iOriginal = oImg.width;

oPicView.iIratio = oImg.width / oImg.height;

oPicView.MatchWidth = 0;

oPicView.Default();

oDiv.appendChild(oImg);

}

this.oImg.src = sUrl;

//缩放相关

SetPic: function(iZoom){

var oImg = this.oImg, oDiv = this.oDiv, iWidth = oImg.width + iZoom, iHeight = iWidth / this.iIratio, iSpacing = this.DefaultHeight - iHeight;

oImg.width = iWidth; oImg.height = iHeight;

//上下居中

if (iSpacing > 0) {

iSpacing /= 2;

oDiv.style.paddingTop = iSpacing + "px";

oDiv.style.height = this.DefaultHeight - iSpacing + "px";

} else {

oDiv.style.paddingTop = "0px";

oDiv.style.height = this.DefaultHeight + "px";

};

//焦点放到中间

oDiv.scrollLeft += iZoom * (oDiv.scrollLeft + this.DefaultWidth / 2) / iWidth;

oDiv.scrollTop += iZoom * (oDiv.scrollTop + this.DefaultHeight / 2) / iHeight;

//放大

ZoomIn: function(){

clearTimeout(this.timer);

if (this.oImg.width > 2048 || this.iChange++ > 20) { this.iChange = 0; return false; }

this.SetPic(5);

var oPicShow = this;

this.timer = window.setTimeout(function(){ oPicShow.ZoomIn(); }, 10);

//缩小

ZoomOut: function(){

clearTimeout(this.timer);

if (this.oImg.width < 100 || this.iChange++ > 20) { this.iChange = 0; return false; }

this.SetPic(-5);

var oPicShow = this;

this.timer = window.setTimeout(function(){ oPicShow.ZoomOut(); }, 10);

//复原

Reset: function(){

clearTimeout(this.timer);

this.SetPic(this.iOriginal - this.oImg.width);

//滚轮

MouseCtrl: function(e){

clearTimeout(this.timer);

var oEvent = Event(e), iZoom = 5 * oEvent.detail, iWidth = this.oImg.width - iZoom;

oEvent.preventDefault();

if (iWidth > 100 && iWidth < 2048) { this.SetPic(-iZoom); };

return false;

//默认尺寸

Default: function(){

var iWidth = this.MatchWidth;

if (iWidth <= 0) {

iWidth = this.DefaultWidth;

if ((iWidth / this.iIratio) > this.DefaultHeight) { iWidth = this.DefaultHeight * this.iIratio; }

this.MatchWidth = iWidth;

}

this.SetPic(iWidth - this.oImg.width);

//拖动相关

MouseDown: function(e){

clearTimeout(this.timer);

var oEvent = Event(e);

this.iDiffX = oEvent.pageX; this.iDiffY = oEvent.pageY;

this.isDrag = true;

MouseMove: function(e){

if (!this.isDrag) return;

var oEvent = Event(e);

this.oDiv.scrollTop += this.iDiffY - oEvent.pageY;

this.oDiv.scrollLeft += this.iDiffX - oEvent.pageX;

this.iDiffX = oEvent.pageX; this.iDiffY = oEvent.pageY;

MouseUp: function(){

this.isDrag = false;

}

};

</script>

</head>

<body>

</tr>

var Pic = new PicView("idShowpic", 680, 460);

Pic.Load('img.jpg');

</script>

<tr>

</td>

</tr>

</table>

</tr>

</table>

<td>

图片URL：

</td>

</tr>

</table>

</body>

</html>