効果の表示と需要分析
結果を示す
需要分析
- ログインをクリックすると、ログインフォームとマスクレイヤーが表示され、閉じるボタンをクリックして非表示にします。
- パスワードを入力すると、プレーンテキストで表示または非表示にできます。
- フォームの先頭でマウスを押した後、フォームをドラッグできます。
- マウスがバウンドしてドラッグして終了します。
コード分析
HTMLコード
<body>
<a href="javascript:;" class="login">登录我的账号</a>
<form action="">
<h4>账号登录</h4>
<div class="login-items">
<label for="uname">用户名：</label >
<input type="text" placeholder="请输入用户名" id="uname">
</div>
<div class="login-items">
<label for="psw">登录密码：</label>
<input type="password" name="" id="psw" placeholder="请输入您的密码">
<span class="close" id="eye-state"></span>
</div>
<a href="javascript:;" class="login-btn">登录账号</a >
<a href="javascript:;" class="close-btn">关闭</a >
</form>
<div id="bg" class="login-bg"></div>
</body>
<script src="js/模态框.js"></script>
jsコード
var eyeState = document.querySelector('#eye-state');
var pswInput = document.querySelector('#psw');
var login = document.querySelector('.login');
var loginBg = document.querySelector('#bg');
var loginForm = document.querySelector('form');
var closeBtn = document.querySelector('.close-btn');
var eyeFlag = 0;
eyeState.onclick = setEye;
login.onclick = goLogin;
closeBtn.onclick = leaveLogin;
loginForm.children[0].addEventListener('mousedown', dragForm);
// 表单内容不可选，不然看着不舒服
loginForm.onselectstart = function(e) {
e.preventDefault();
}
// 1、实现小眼睛改变密码输入状态
function setEye() {
if (!eyeFlag) {
eyeState.className = 'open';
pswInput.type = 'text';
eyeFlag = 1;
} else {
eyeState.className = 'close';
pswInput.type = 'password';
eyeFlag = 0;
}
}
// 2、外面登录按钮实现表单、遮罩层的显示和它自己隐藏
function goLogin() {
loginBg.style.visibility = 'visible';
loginForm.style.display = 'block';
this.style.display = 'none';
}
// 3、关闭按钮实现表单、遮罩层的隐藏和外面登录按钮的显示
function leaveLogin() {
loginBg.style.visibility = 'hidden';
loginForm.style.display = 'none';
login.style.display = 'block';
}
// 4、实现表单拖拽效果
function dragForm(e) {
// 当鼠标在表单的标题按下时获取它在表单元素内的坐标并绑定移动事件
var x = e.pageX - this.parentNode.offsetLeft;
var y = e.pageY - this.parentNode.offsetTop;
document.addEventListener('mousemove', move);
// 鼠标弹起移除移动事件
this.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
});
function move(event) {
loginForm.style.left = event.pageX - x + 'px';
loginForm.style.top = event.pageY - y + 'px';
}
}
分析
- パスワード入力ボックスで、span要素の後ろの目をクリックすると、eyeFlag変数を使用して、フォームのタイプ属性とスパンのクラス名（小さな目の画像を使用する必要があります）が決定されます。
- フォームのタイトル領域でマウスを押すとドラッグ効果が得られるため、mousedownイベントをタイトルにバインドします。
- mousemoveイベントとmouseupイベントは、マウスが押された後、それぞれドキュメントとこれ（タイトル）にバインドされます。
ドラッグアンドドロップ中にmousemoveイベントがタイトルにバインドされると、バグが発生します。すばやくドラッグすると、マウスがタイトルを離れ、フォームが追いつかなくなります。したがって、このイベントをドキュメントにバインドします。
マウスに続くフォームの原理：マウスを押すと、フォーム内のフォームの座標が、マウスとページ上のフォームの座標に従って取得されます（ドラッグプロセス中に位置は変更されません）。マウスの移動の過程で、ページ上のマウスの動的座標とフォーム上のその座標に従って、ページ上のフォームの動的座標を取得できます。