<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
}
.nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none;
}
.d-box {
400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
}
.hd {
100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
}
#box_close {
float: right;
cursor: pointer;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求：在指定位置按住鼠标左键移动对话框。
//分析：鼠标按下，触动事件，移动在更换对话框的位置。
//鼠标按下onmousedown 鼠标弹起:onmouseup 鼠标移动onmousemove
//步骤：
//1.老三步和新五步
//2.把鼠标的坐标赋值给对话框。
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//1.老三步和新五步
//先按下，在移动触动此事件
drop.onmousedown = function (event) {
//获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
var x = pagex - box.offsetLeft;
var y = pagey - box.offsetTop;
document.onmousemove = function (event) {
//2.把鼠标的坐标赋值给对话框。
event = event || window.event;
var xx = event.pageX || scroll().left + event.clientX;
var yy = event.pageY || scroll().top + event.clientY;
//二次操作鼠标位置 减去鼠标在盒子中的坐标
xx = xx - x;
yy = yy - y;
//给box赋值
box.style.left = xx+"px";
box.style.top = yy+"px";
//禁止文本选中（选中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//事件解绑
drop.onmouseup = function () {
//解绑
document.onmousemove = null;
}
}
</script>
</head>
<body>
<!--顶部注册部分，无用-->
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<!--我们移动的对话框-->
<div class="d-box" id="d_box">
<div class="hd" id="drop">
<i>注册信息 (可以拖拽)</i>
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
</body>
</html>
引入JS文件
//动画基础
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-ele.offsetTop)/10;
step=step>0?Math.ceil(step):Math.floor(step);
ele.style.top=ele.offsetTop+step+"px";
if (Math.abs(target-ele.offsetTop)<Math.abs(step)) {
ele.style.top=target+"px";
clearInterval(ele.timer);
}
},25)
}
//兼容浏览器
function scroll(){
if (window.pageYOffset!=null) {
return{
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode==="Css1compat") {
return{
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{
return{
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
}