<!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 } } }