實現了拖拽和狀態欄
<!doctype html>
<html>
<head>
? ?
? ? <title>qq面板</title>
? ? <style>
? ? *{margin:0;padding:0;}
? ? ? ? #zhu{background-color:#f3f3f3;border:1px solid #dddddd;position:absolute;left:400px;top:400px;padding:30px 130px;border-radius:15px;box-shadow:0 0 20px #444444;}
? ? ? ? #logo{margin:0 auto;text-align:center;font-size:30px;height:100px;line-height:100px;font-weight:900;}
? ? ? ? #logo img{width:50px;position:relative;top:12px;}
? ? ? ? #dlk{margin:0 auto;text-align:center;padding:30px 0;font-size:25px;position:relative;}
? ? ? ? #zt{display:inline-block;}
? ? ? ? input{margin:10px 0;height:35px;border-radius:15px;width:250px;outline:none;text-align:center;}
? ? ? ? #dlan{width:150px;height:45px;border-radius:10px;background-color:#0066ff;color:#ffffff;font-size:20px;font-weight:900px;margin:25px 70px 0 0;}
? ? ? ? #zhuangtai{display:inline-block;position:absolute;margin-top:25px;}
? ? ? ? #zt{border:1px solid #111111;}
? ? ? ? #ztjh{display:none;border:1px solid #111111;}
? ? ? ? #ztjh ul{list-style-type:none;}
? ? ? ? .ztl:hover{background-color:#989898;}
? ? </style>
? ??
</head>
<body>
<div id="zhu">
? ? <div id="logo">
? ? ? ? <img src="http://www.ecmaitian.com/uploadfile/2013/1016/20131016092851277.jpg" value="qq">
? ? ? ? <span id="dl">登錄</span>
? ? </div>
? ? <div id="dlk">
? ? ? ? <span>賬號：</span>
? ? ? ? <input type="text" placeholder="QQ賬號或Email賬號"><br/>
? ? ? ? <span>密碼：</span>
? ? ? ? <input type="text" placeholder="請輸入密碼"><br/>
? ? ? ? <input id="dlan" type="button" value="登錄">
? ? ? ? <div id="zhuangtai">
? ? ? ? ? ? <div id="zt">
? ? ? ? ? ? ?<span id="tb"></span>
? ? ? ? ? ? ? ? <span id="kb">在線</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div id="ztjh">
? ? ? ? ?<ul>
? ?<li><span></span><span>隱身</span></li>
? ?<li><span></span><span>忙碌</span></li>
? ?<li><span></span><span>離線</span></li>
? ?<li><span></span><span>勿擾</span></li>
? ?<li><span></span><span>Q我</span></li>
? ?</ul>
? ?</div>
? ? ? ? </div>
? ? </div>
</div>
<script>
? ? window.onload=function(){
? ? ? ? var lgl=document.getElementById("logo");
? ? ? ? var zmb=document.getElementById("zhu");
? ? ? ? lgl.onmousedown=function(event){
? ? ? ? ? ? //實現拖拽功能
? ? ? ? ? ? event=event||window.event;?
? ? ? ? ? ? var zx=event.clientX-zmb.offsetLeft;
? ? ? ? ? ? var zy=event.clientY-zmb.offsetTop;
? ? ? ? ? ? document.onmousemove=function(event){
? ? ? ? ? ? ? ? event=event||window.event;
? ? ? ? ? ? ? ? var zmb=document.getElementById("zhu");
? ? ? ? ? ? ? ? var dx=event.clientX-zx;
? ? ? ? ? ? ? ? var dy=event.clientY-zy;
? ? ? ? ? ? ? ? var w=zmb.offsetWidth;
? ? ? ? ? ? ? ? var h=zmb.offsetHeight;
? ? ? ? ? ? ? ? var maxl=document.documentElement.clientWidth-w;
? ? ? ? ? ? ? ? var maxt=document.documentElement.clientHeight-h;
? ? ? ? ? ? ? ? if(dx<0){
? ? ? ? ? ? ? ? ? ? dx=0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(dx>maxl){
? ? ? ? ? ? ? ? ? ? dx=maxl;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(dy<0){
? ? ? ? ? ? ? ? ? ? dy=0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(dy>maxt){
? ? ? ? ? ? ? ? ? ? dy=maxt;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? zmb.style.left=dx+"px";
? ? ? ? ? ? ? ? zmb.style.top=dy+"px";
? ? ? ? ? ? }
? ? ? ? ? ? document.onmouseup=function(){?
? ? ? ? ? ? ? ? document.onmousemove=null;
? ? ? ? ? ? ? ? document.onmouseup=null;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //實現狀態欄
? ? ? ? var zt=document.getElementById("zt");
? ? ? ? var ztjh=document.getElementById("ztjh");
? ? ? ? var l=document.getElementsByTagName("li");
? ? ? ? zt.onclick=function(){
? ? ? ? ? ? ztjh.style.display="block";
? ? ? ? }
? ? ? ? for(var i=0;i<l.length;i++){
? ? ? ? ? ? l[i].onclick=function(){
? ? ? ? ? ? ? ? ztjh.style.display="none";
? ? ? ? ? ? ? ? var t=this.getElementsByTagName("span")[1];
? ? ? ? ? ? ? ? var kb=document.getElementById("kb");
? ? ? ? ? ? ? ? var dj=t.innerHTML;
? ? ? ? ? ? ? ? var xs=kb.innerHTML;
? ? ? ? ? ? ? ? t.innerHTML=xs;
? ? ? ? ? ? ? ? kb.innerHTML=dj;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? }
</script>
</body>
</html>
2015-12-17
封裝拖拽代碼，對任意div實現拖拽
<!DOCTYPE?html> <html> <head> ????<title>可拖拽的登錄框</title> ????<style> ????????#loginDiv{width:300px;height:220px;position:absolute;background:#eee;box-shadow:0?0?10px?#ccc;color:#353434;font-family:"微軟雅黑"} ????????#loginDiv?.close{height:30px;line-height:30px;width:30px;?text-align:center;position:absolute;right:0}? ????????#loginDiv?.top{height:30px;line-height:30px;text-align:center;cursor:move;} ????????#loginDiv?.container?{margin:20px?0} ????????#loginDiv?.container?p{padding:10px?30px} ????????#loginDiv?.login{text-align:center} ????????#loginDiv?.login?a{background-color:#0982f7;color:#fff;padding:7px?20px;border-radius:6px;text-decoration:none;letter-spacing:3px;transition:all?ease?0.5s} ?????????#loginDiv?.login?a:hover{box-shadow:0?0?10px?#0982f7;} ????</style> </head> <body> ????<div?id="loginDiv"> ????????<div?id="loginClose"?class="close">X</div> ????????<div?class="top">登錄</div> ????????<div?class="container"> ????????????<p>用戶名:<input??type="text"?placeholder="請輸入用戶名"/></p> ????????????<p>密 碼:<input?type="text"?placeholder="請輸入密碼"?/></p> ????????</div> ????????<div?class="login"><a?href="javascript:void(0)">登錄</a></div> ????</div> ????<script> ????????var?Drag?=?{ ????????????obj:?null, ????????????init:?function?(obj)?{ ????????????????obj.onmousedown?=?this.start; ????????????}, ????????????start:?function?(e)?{ ????????????????var?obj; ????????????????var?e?=?Drag.fixEvent(e); ????????????????e.preventDefault?&&?e.preventDefault(); ????????????????Drag.obj?=?obj?=?this; ????????????????obj.x?=?e.clientX?-?obj.offsetLeft; ????????????????obj.y?=?e.clientY?-?obj.offsetTop; ????????????????document.onmousemove?=?Drag.move; ????????????????document.onmouseup?=?Drag.stop; ????????????}, ????????????move:?function?(e)?{ ????????????????e?=?Drag.fixEvent(e); ????????????????var?left?=?e.clientX?-?Drag.obj.x, ??????????????????????top?=?e.clientY?-?Drag.obj.y, ??????????????????????winHeight?=?document.documentElement.clientHeight?||?document.body.clientHeight, ??????????????????????winWidth?=?document.documentElement.clientWidth?||?document.body.clientWidth; ????????????????if?(left?<=?0)?left?=?0; ????????????????if?(left?>=?winWidth?-?Drag.obj.offsetWidth)?left?=?winWidth?-?Drag.obj.offsetWidth; ????????????????console.log(document.documentElement.clientWidth); ????????????????if?(top?<=?0)?top?=?0; ????????????????if?(top?>=?winHeight?-?Drag.obj.offsetHeight)?top?=?winHeight?-?Drag.obj.offsetHeight; ????????????????Drag.obj.style.left?=?left?+?'px'; ????????????????Drag.obj.style.top?=?top?+?'px'; ????????????}, ????????????stop:?function?()?{ ???????????????Drag.obj=document.onmousemove?=?document.onmouseup?=?null; ????????????}, ????????????fixEvent:?function?(e)?{ ????????????????var?e?=?e?||?window.event; ????????????????return?e; ????????????} ????????} ????????window.onload?=?function?()?{ ????????????var?o?=?document.getElementById("loginDiv"); ????????????Drag.init(o); ????????} ????</script> </body> </html>