在看杨老师的视频，在dom这季中，有一个点击登录，弹出登录窗口，自己再次基础上又加了一个功能——让窗口可以拖动：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.divLoginCss
{
display:none;
top:200px;
left:200px;
width:500px;
border-color:Blue;
border-style:solid;
border-width:thin;
background-color:Gray;
}
</style>
<script type="text/javascript">
function showLogin() {
divLogin.style.display = "";
}
function hideLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display = "none";
}
/********************************实现windows窗体移动效果*************************/
//var x, y;//存储鼠标在moveWin的层上按下时，相对于这个层左上角的坐标值
function winMouseDown() {
// var x = window.event.offsetX;
//var y = window.event.offsetY;
var divMove = document.getElementById("moveWin");
//将鼠标在moveWin的层上按下时，相对于这个层左上角的坐标值存储在id为moveWin的层的自定义属性中
divMove.setAttribute("x",window.event.offsetX);
divMove.setAttribute("y",window.event.offsetY);
document.onmousemove = function () {
/*测试代码
alert('sssss');
var inputa = document.createElement("input");
inputa.type = "button";
inputa.value = "你好";
document.body.appendChild(inputa);*/
var divMove = document.getElementById("moveWin");
var divLogin = document.getElementById("divLogin");
var divMoveX = window.event.clientX;
var divMoveY = window.event.clientY;
var x = divMove.getAttribute("x");
var y = divMove.getAttribute("y");
if (divMoveY < 0) {
return;
}
var xx = divMoveX - x;
var yy = divMoveY - y;
divLogin.style.left = xx + "px";
divLogin.style.top = yy + "px";
};
}
//鼠标松开时，使onmousemove事件不起作用
function winMouseUp() {
document.onmousemove = function () {
window.event.returnValue = false;
};
}
//避免鼠标在其他地方松开时，不能消除onmousemove事件
document.onmouseup = function () {
document.onmousemove = function () {
window.event.returnValue = false;
};
};
</script>
</head>
<body>
<!--
点击【登录】按钮，弹出一个显示用户名、密码等的层。
将用户名、密码等写到一个层中，层默认是隐藏的，点击【登录
】超链接以后将层显示出来，如果点击层中的关闭按钮，则隐藏
层。绝对定位，显示到中间位置
-->
<a href="javascript:showLogin()" >[登录]</a>
<div id="divLogin" style="position:absolute;top:200px;left:200px;border-color:Blue;border-style:solid;border-width:3px;display:none;background-color:Gray;width:500px;">
<div id="moveWin" style="background-color:Blue;border-color:Blue;border-style:solid;border-width:thin;width:500px;height:30px;cursor:default">
登录
<input type="image" src="../img/close.JPG" style="float:right" />
</div>
<table>
<tr>
<td>
<label for="userName">用户名：</label>
</td>
<td>
<input type="text" id="userName"/>
</td>
</tr>
<tr>
<td>
<label for="password">密码：</label>
</td>
<td>
<input type="text" id="password"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="登录" />
</td>
</tr>
</table>
</div>
</body>
</html>
2、主要的思路是：当鼠标按下时，添加onmousemove事件，当鼠标松开时，修改onmousemove 的实现函数，在函数中设置window.event.returnValue 为 false ，使得onmousemove 实现不起作用
|
收藏
淘帖
踩
