四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动
鼠标拖动的javascript代码如下：
|
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar = document.getElementById(''titlebar'');
titleBar.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(oShow.style.top);
moveLeft = parseInt(oShow.style.left);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + 302 < iWidth) && y > 0 && (y + 202 < iHeight) ) {
oShow.style.left = x + "px";
oShow.style.top = y + "px";
}
}
};
document.onmouseup = function () {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
|
点击下面“运行”直接查看效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
|
