<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
ul,li,ol{
list-style: none;
margin: 0;
padding: 0;
}
.main{
width: 500px;
margin: 0 auto;
position: relative;
height: 500px;
}
.loogin{
width: 390px;
height: 300px;
background-color: white;
border: 1px solid #ccc;
display: none;
position: relative;
top: 0;
left: 0;
}
.loogin input{
width: 300px;
height: 30px;
border: 1px solid #999;
border-radius: 100px;
outline: none;
}
.pwd{
margin-left: 10px;
margin-bottom: 20px;
}
.mimas{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
padding: 0 10px;
}
.username{
margin-bottom: 20px;
}
.submit{
height: 30px;
width: 200px;
border: none;
border-radius: 50px;
display: block;
margin: 0 auto;
}
.title{
height: 50px;
border-bottom: 1px dotted #999;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
cursor: move;
}
.title .close{
margin-right: 5px;
width: 20px;
height: 20px;
border: 1px solid #999;
text-align: center;
margin-top: 5px;
cursor: pointer;
}
</style>
<div class="main">
<div class="btn">点击登录</div>
<div class="loogin">
<div class="title">
<div class="title_info"></div>
<div class="close">X</div>
</div>
<form action="">
<div class="username">
<label for="">用户名:</label>
<input type="text" name="" id="">
</div>
<div class="pwd">
<label for="passwodrd">密 码:</label>
<input type="password">
</div>
<ul class="mimas">
<li>记住我</li>
<li>忘记密码?</li>
</ul>
<button class="submit">登录</button>
</form>
</div>
</div>
<script>
var btn = document.querySelector('.btn')
var login = document.querySelector('.loogin')
var close = document.querySelector('.close')
var title = document.querySelector('.title')
btn.addEventListener('click',function(){
login.style.display = 'block'
this.style.display = 'none'
document.body.style.backgroundColor = '#ccc'
})
close.addEventListener('click',function(){
login.style.display = 'none'
location.reload()
})
title.addEventListener('mousedown',function(e){
var x = e.pageX - login.offsetLeft
var y = e.pageY - login.offsetTop
document.addEventListener('mousemove',move)
function move(e){
login.style.left = e.pageX - x + 'px'
login.style.top = e.pageY - y + 'px'
}
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move)
})
})
</script>
</body>
</html>
JavaScript拖动元素位置示例
最新推荐文章于 2024-01-03 10:07:21 发布