自定义JavaScript轻量级弹窗LiteBox
在Web开发中，弹窗是一个非常常见的功能，用于在不离开当前页面的情况下展示额外的信息。通常，开发者会使用现成的库或插件来实现这一功能，例如流行的jQuery插件库。然而，有时候为了满足特定的需求，可能需要自己编写一个轻量级的弹窗。本文将介绍如何从头开始编写一个名为LiteBox的轻量级弹窗，并提供完整的代码和示例。
LiteBox简介
LiteBox是一个简单的jQuery插件，它没有复杂的功能，只专注于基本的弹窗展示。如果熟悉jQuery，那么使用LiteBox将非常顺手。如果对jQuery还不太了解，可以查看了解更多信息。
LiteBox的基本用法
LiteBox的使用方法非常简单，只需要调用一个jQuery函数即可。以下是它的基本签名：
jQuery.lightbox(url, [options]);
其中，url参数是必需的，指定了要在弹窗中显示的图片的URL。options参数是可选的，是一个键值对集合，用于配置弹窗。以下是一些常用的配置项：
- title: 用于tooltip和图片的alt属性的文本，默认值为图片的URL。
- showCloseButton: 是否显示关闭按钮，默认为true。
- closeButtonPosition: 关闭按钮的位置，可以是'top-left'、'top-right'、'bottom-left'或'bottom-right'，默认为'top-right'。
- animationSpeed: 动画速度，可以是'slow'、'medium'或'fast'，或者以毫秒为单位指定动画长度，默认为'medium'（即500ms）。
LiteBox的CSS样式
在深入JavaScript代码之前，先来看一下LiteBox的CSS样式。以下是一些基本的样式定义：
.jquery-litebox-lightbox {
position: absolute;
background-color: Transparent;
z-index: 1001;
margin: 0px;
padding: 0px;
border: 10px solid white;
}
.jquery-litebox-img {
margin: 0px;
padding: 0px;
}
.jquery-litebox-close {
height: 25px;
width: 25px;
position: absolute;
cursor: pointer;
background-image: url(images/jquery-litebox_close.png);
background-repeat: no-repeat;
z-index: 1002;
}
.jquery-litebox-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(images/jquery-litebox_shadow.png);
background-repeat: repeat;
}
LiteBox的JavaScript实现
接下来，来看一下LiteBox的JavaScript实现。首先，需要合并用户选项到一个settings对象中：
var settings = {
title: url,
showCloseButton: true,
closeButtonPosition: 'top-right',
animationSpeed: 'medium'
};
$.extend(settings, options);
然后，需要创建一个标签用于显示全尺寸图片，并将其添加到DOM中。这样做的目的是让浏览器加载图片，以便可以获取其属性，如高度和宽度等。但是，先让图片不可见：
var img = $('');
$('body').append(img);
一旦浏览器加载了图片，就可以开始创建弹窗了。通过监听图片的load事件来创建弹窗，并将图片添加到弹窗中：
var imgWidth = $(this).width();
var imgHeight = $(this).height();
$(this).detach().height('0px').width('0px');
var lightbox = $('').css('top', $(window).scrollTop() + 100 + 'px').css('left', ($(window).width() / 2) - (imgWidth / 2) + 'px');
var shadow = $('');
$('body').append(shadow);
$('body').append(lightbox);
lightbox.append($(this));
接下来，需要对弹窗进行动画处理。动画非常简单：只需要让图片从左上角到右下角逐渐放大，直到图片达到全尺寸。这可以通过jQuery的animate()函数实现：
var animationTime = getAnimationTime(settings.animationSpeed);
$(this).show().animate({
width: imgWidth,
height: imgHeight
}, animationTime, function() {
if (settings.showCloseButton) {
showCloseButton(settings.closeButtonPosition);
img.mouseover(function() {
showCloseButton(settings.closeButtonPosition);
});
img.mouseout(function(e) {
hideCloseButton(e);
});
}
});
当动画完成后，还需要监听图片的mouseover和mouseout事件，以显示和隐藏关闭按钮。以下是显示和隐藏按钮的代码：
function showCloseButton(position) {
var img = $('img.jquery-litebox-img');
var imgPositionY = img.offset().top;
var imgPositionX = img.offset().left;
var imgHeight = img.height();
var imgWidth = img.width();
if ($('div.jquery-litebox-close').length == 0) {
var close = $('');
$('body').append(close);
switch (position) {
case 'top-left':
close.css('top', imgPositionY).css('left', imgPositionX);
break;
case 'top-right':
close.css('top', imgPositionY).css('left', (imgPositionX + imgWidth) - close.width());
break;
case 'bottom-left':
close.css('top', (imgPositionY + imgHeight) - close.height()).css('left', imgPositionX);
break;
case 'bottom-right':
close.css('top', (imgPositionY + imgHeight) - close.height()).css('left', (imgPositionX + imgWidth) - close.width());
break;
default:
throw new Error("Button position must be one of either: 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.");
}
close.click(function(e) {
$(this).remove();
closeLightBox();
});
close.show();
}
}
function hideCloseButton(mouseEvent) {
if (!isIn($('div.jquery-litebox-close'), mouseEvent))
$('div.jquery-litebox-close').remove();
}
function isIn(obj, mouseEvent) {
if (obj.length > 0) {
var x = mouseEvent.pageX;
var y = mouseEvent.pageY;
var posX = obj.position().left;
var posY = obj.position().top;
var objX = obj.width();
var objY = obj.height();
return x > posX && x < posX + objX && y > posY && y < posY + objY;
} else
return false;
}
function getAnimationTime(speed) {
if (typeof speed === 'string') {
switch (speed) {
case 'slow':
return 1000;
case 'medium':
return 500;
case 'fast':
return 250;
default:
var parsedSpeed = parseInt(speed);
if (!isNaN(parsedSpeed))
return parsedSpeed;
else
throw new Error("Animation speed must be a number or one of: 'slow', 'medium' or 'fast'.");
}
} else if (typeof speed === 'number')
return speed;
else
throw new Error("Animation speed must be a number or one of: 'slow', 'medium' or 'fast'.");
}