[关闭]
@EncyKe 2015-12-28T07:21:28.000000Z 字数 6838 阅读 1628

JS：可拖曳登录面板

前端 JavaScript

HTML部分

  1. <div class="loginPanel" id="loginPanel">
  2.     <div style="position: relative; z-index: 1;">
  3.         <div class="ui_boxyClose" id="ui_boxyClose"></div>
  4.     </div>
  5.     <div class="login_logo_webqq"></div>
  6.     <div class="inputs">
  7.         <div class="sign-input"><span>帐　号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
  8.         <div class="sign-input"><span>密　码：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
  9.     </div>
  10.     <div class="bottomDiv">
  11.         <div class="btn" style="float: left"></div>
  12.         <div>
  13.             <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
  14.                 <div id="loginStateShow" class="login-state-show online">状态</div>
  15.                 <div class="login-state-down">下</div>
  16.                 <div class="login-state-txt" id="login2qq_state_txt">在线</div>
  17.                 <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
  18.                     <li id="online" class="statePanel_li">
  19.                         <div class="stateSelect_icon online"></div>
  20.                         <div class="stateSelect_text">我在线上</div>
  21.                     </li>
  22.                     <li id="callme" class="statePanel_li">
  23.                         <div class="stateSelect_icon callme"></div>
  24.                         <div class="stateSelect_text">Q我吧</div>
  25.                     </li>
  26.                     <li id="away" class="statePanel_li">
  27.                         <div class="stateSelect_icon away"></div>
  28.                         <div class="stateSelect_text">离开</div>
  29.                     </li>
  30.                     <li id="busy" class="statePanel_li">
  31.                         <div class="stateSelect_icon busy"></div>
  32.                         <div class="stateSelect_text">忙碌</div>
  33.                     </li>
  34.                     <li id="silent" class="statePanel_li">
  35.                         <div class="stateSelect_icon silent"></div>
  36.                         <div class="stateSelect_text">请勿打扰</div>
  37.                     </li>
  38.                     <li id="hidden" class="statePanel_li">
  39.                         <div class="stateSelect_icon hidden"></div>
  40.                         <div class="stateSelect_text">隐身</div>
  41.                     </li>
  42.                 </ul>
  43.             </div>
  44.         </div>
  45.     </div>
  46. </div>

CSS部分

  1. .loginPanel {
  2.     width: 380px;
  3.     height: 247px;
  4.     left: 400px;
  5.     top: 120px;
  6.     position: absolute;
  7.     border: 1px solid #ccc;
  8.     background: #f6f6f6;
  9.     -moz-border-radius: 10px;
  10.     -webkit-border-radius: 10px;
  11.     border-radius: 10px;
  12.     -moz-box-shadow: 0 0 8px #000;
  13.     -webkit-box-shadow: 0 0 8px #000;
  14.     box-shadow: 0 0 8px #000;
  15. }
  18. .login_logo_webqq {
  19.     background: url('../images/login_window_logo.png') no-repeat -210px -0px;
  20.     margin-left: 100px;
  21.     margin-top: 10px;
  22.     width: 200px;
  23.     height: 44px;
  24.     cursor: move;
  25. }
  28. .inputs {
  29.     font: bold 15px arial;
  30.     margin-left: 80px;
  31.     margin-top: 30px;
  32. }
  34. .inputs .sign-input {
  35.     padding-bottom: 20px;
  36. }
  38. .inputs .sign-input input {
  39.     width: 170px;
  40.     border: 1px #ccc solid;
  41.     color: #868686;
  42.     font-size: 16px;
  43.     padding: 2px;
  44.     -moz-border-radius: 10px;
  45.     -webkit-border-radius: 10px;
  46.     -khtml-border-radius: 10px;
  47.     -border-radius: 10px;
  48.     outline: none;
  49. }
  51. .btn {
  52.     background: url("../images/login_btn.png") no-repeat -111px 0;
  53.     width: 111px;
  54.     height: 36px;
  55.     border: 0;
  56.     text-align: center;
  57.     line-height: 20px;
  58.     color: #0C4E7C;
  59.     cursor: pointer;
  60.     margin-left: 14px;
  61. }
  64. .login-state-trigger {
  65.     cursor: pointer;
  66.     display: block;
  67.     float: left;
  68.     height: 16px;
  69.     overflow: hidden;
  70.     width: 120px;
  71.     margin: 4px 0 0 0;
  72. }
  74. .login-state-trigger2 {
  75.     margin: 10px 0 0 20px;
  76. }
  78. .login-state-down {
  79.     background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
  80.     float: left;
  81.     height: 6px;
  82.     margin-top: 5px;
  83.     overflow: hidden;
  84.     text-indent: -999em;
  85.     width: 7px;
  86. }
  88. .login-state-show {
  89.     float: left;
  90.     height: 14px;
  91.     overflow: hidden;
  92.     text-indent: -999em;
  93.     width: 14px;
  94.     margin: 1px 4px 0 0;
  95. }
  97. .login-state-txt {
  98.     float: left;
  99.     margin-left: 5px;
  100.     font-size: 12px;
  101.     >line-height:18px!important;
  102. }
  104. .login-state .callme {
  105.     background: url("../images/ptlogin.png") -72px 0 no-repeat;
  106. }
  108. .login-state .online {
  109.     background: url("../images/ptlogin.png") 0 0 no-repeat;
  110. }
  112. .login-state .away {
  113.     background: url("../images/ptlogin.png") -18px 0 no-repeat;
  114. }
  116. .login-state .busy {
  117.     background: url("../images/ptlogin.png") -36px 0 no-repeat;
  118. }
  120. .login-state .silent {
  121.     background: url("../images/ptlogin.png") -108px 0 no-repeat;
  122. }
  124. .login-state .hidden {
  125.     background: url("../images/ptlogin.png") -54px 0 no-repeat;
  126. }
  128. .statePanel {
  129.     display: none;
  130.     position: absolute;
  131.     right: 68px;
  132.     top: 193px;
  133.     z-index: 10;
  134.     margin: 0;
  135.     border-width: 1px;
  136.     border-style: solid;
  137.     border-color: #ccc #6a6a6a #666 #cdcdcd;
  138.     padding: 0;
  139.     width: 100px;
  140.     height: 133px;
  141.     overflow: hidden;
  142.     background: white;
  143.     font-size: 12px;
  144.     line-height: 1.5;
  145. }
  147. .statePanel .statePanel_li {
  148.     display: block;
  149.     float: left;
  150.     margin: 0;
  151.     padding: 3px 0;
  152.     width: 100px;
  153.     height: 16px;
  154.     line-height: 16px;
  155.     overflow: hidden;
  156.     zoom: 1;
  157.     cursor: pointer;
  158. }
  160. .stateSelect_icon {
  161.     float: left;
  162.     margin: 2px 0 0 5px;
  163.     width: 14px;
  164.     height: 14px;
  165.     overflow: hidden;
  166. }
  168. .stateSelect_text {
  169.     margin: 0 0 0 22px;
  170. }
  172. .bottomDiv {
  173.     margin-left: 70px;
  174. }
  176. .ui_boxyClose{
  177.     width:28px;
  178.     height:28px;
  179.     position:absolute;
  180.     top:-10px;
  181.     right:-10px;
  182.     cursor:pointer;
  183.     background:url('../images/boxy_btn.png') no-repeat;z-index:1
  184. }
  186. .ie6_0 .ui_boxyClose{
  187.     background:0;
  188.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')
  189. }

JS部分

  1. window.onload = drag;
  3. // 封装类名选择函数
  4. function getByClass(clsName,parent){
  5.     var oParent = parent ? document.getElementById(parent) : document,
  6.         eles = [],
  7.         elements = oParent.getElementsByTagName('*');
  8.     for(var i = 0, l = elements.length; i < l; i++){
  9.         if(elements[i].className == clsName){
  10.             eles.push(elements[i]);
  11.         }
  12.     }
  13.     return eles;
  14. }
  16. // 拖曳主函数
  17. function drag(){
  18.     var oTitle = getByClass('login_logo_webqq','loginPanel')[0];
  19.     // 拖曳
  20.     oTitle.onmousedown = fnDown;
  21.     // 关闭
  22.     var oClose = document.getElementById('ui_boxyClose');
  23.     oClose.onclick = function(){
  24.         document.getElementById('loginPanel').style.display = 'none';
  25.     }
  26.     // 获取切换状态
  27.     var loginState = document.getElementById('loginState'),
  28.         stateList = document.getElementById('loginStatePanel'),
  29.         lis = stateList.getElementsByTagName('li'),
  30.         stateTxt = document.getElementById('login2qq_state_txt'),
  31.         loginStateShow = document.getElementById('loginStateShow');
  33.     // 状态按钮下拉菜单
  34.     loginState.onclick = function(e){
  35.         e = e || window.event;
  36.         if(e.stopPropagation){
  37.             e.stopPropagation();
  38.         }
  39.         else{
  40.             e.cancelBubble = true;
  41.         }
  42.         stateList.style.display='block';
  43.     }
  45.     // 鼠标滑过、离开和点击状态列表时
  46.     for(var i = 0, l = lis.length; i < l; i++){
  47.         lis[i].onmouseover = function(){
  48.             this.style.background = '#567';
  49.         }
  50.         lis[i].onmouseout = function(){
  51.             this.style.background = '#FFF';
  52.         }
  53.         lis[i].onclick=function(e){
  54.             e = e || window.event;
  55.             if(e.stopPropagation){
  56.                 e.stopPropagation();
  57.             }
  58.             else{
  59.                 e.cancelBubble = true;
  60.             }
  61.             var id = this.id;
  62.                 stateList.style.display = 'none';
  63.                 stateTxt.innerHTML = getByClass('stateSelect_text',id)[0].innerHTML;
  64.             loginStateShow.className = '';
  65.             loginStateShow.className = 'login-state-show ' + id;
  66.         }
  67.     }
  68.     document.onclick = function(){
  69.         stateList.style.display = 'none';
  70.     }
  71. }
  73. // 鼠标按住事件
  74. function fnDown(event){
  75.     event = event || window.event;
  76.     var oDrag = document.getElementById('loginPanel'),
  77.     // 光标按下时光标和面板之间的距离
  78.     disX = event.clientX - oDrag.offsetLeft,
  79.     disY = event.clientY - oDrag.offsetTop;
  80.     // 移动
  81.     document.onmousemove = function(event){
  82.         event = event || window.event;
  83.         fnMove(event,disX,disY);
  84.     }
  85.     // 释放鼠标
  86.     document.onmouseup = function(){
  87.         document.onmousemove = null;
  88.         document.onmouseup = null;
  89.     }
  90. }
  92. // 鼠标拖曳事件
  93. function fnMove(e,posX,posY){
  94.     var oDrag = document.getElementById('loginPanel'),
  95.         l = e.clientX - posX,
  96.         t = e.clientY - posY,
  97.         winW = document.documentElement.clientWidth || document.body.clientWidth,
  98.         winH = document.documentElement.clientHeight || document.body.clientHeight,
  99.         maxW = winW - oDrag.offsetWidth - 10,
  100.         maxH = winH - oDrag.offsetHeight;
  101.     if(l < 0){
  102.         l = 0;
  103.     }
  104.     else if(l > maxW){
  105.         l = maxW;
  106.     }
  107.     if(t < 0){
  108.         t = 10;
  109.     }
  110.     else if(t > maxH){
  111.         t = maxH;
  112.     }
  113.     oDrag.style.left = l + 'px';
  114.     oDrag.style.top = t + 'px';
  115. }

附：参考

慕课：DOM事件探秘-第四章
Demo下载

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注