I have been using Tencent QQ for nearly ten years. Today, I have been trying to imitate Tencent QQ’s login panel to make a web version of login panel. Then I refer to some code, imitate it myself, and learn to write one.
The effects are as follows:
It also realizes the effect of dragging the panel and selecting the status
Here is the specific code:
1.index.html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Drag</title> <link href="css/main.css" rel="stylesheet" /> <script src="js/drag.js"></script></head><body> <div id="loginPanel"> <div style="position: relative; z-index: 1;"> <div id="ui_boxyClose"></div> </div> <div> <div> <div><span>Account: </span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" tabindex="1" value="QQ number or Email account" onFocus="if (value =='QQ number or Email account'){value =''}" onBlur="if (value ==''){value='QQ number or Email account';}" /></span></div> <div><span>Password: </span><span><input name="p" id="p" maxlength="16" type="password" tabindex="2" /></span></div> </div> <div> <div style="float: left"></div> <div> <div id="loginState"> <div id="loginStateShow">Status</div> <div> <div>Under</div> <div> <div id="login2qq_state_txt">Online</div> <ul id="loginStatePanel" style="display: none"> <li id="online"> <div></div> <div>I'm online</div> </li> <li id="callme"> <div></div> <div>Q Me</div> </li> <li id="away"> <div></div> <div>Leave</div> </li> <li id="busy"> <div></div> <div>Busy</div> </li> <li id="silent"> <div></div> <div>Do not disturb</div> </li> <li id="hidden"> <div></div> <div>Invisible</div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></body></html>2.css/main.css:
.loginPanel { width: 380px; height: 247px; left: 400px; top: 120px; position: absolute; border: 1px solid #ccc; background: #f6f6f6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 8px #000; -webkit-box-shadow: 0 0 8px #000; box-shadow: 0 0 8px #000; } .login_logo_webqq { background: url('../images/login_window_logo.png') no-repeat -210px -0px; margin-left: 100px; margin-top: 10px; width: 200px; height: 44px; cursor: move; } .inputs { font: bold 15px arial; margin-left: 80px; margin-top: 30px; } .inputs .sign-input { padding-bottom: 20px; } .inputs .sign-input input { width: 170px; border: 1px #ccc solid; color: #868686; font-size: 16px; padding: 2px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -border-radius: 10px; -border-radius: 10px; outline: none; } .btn { background: url("../images/login_btn.png") no-repeat -111px 0; width: 111px; height: 36px; border: 0; text-align: center; line-height: 20px; color: #0C4E7C; cursor: pointer; margin-left: 14px; } .login-state-trigger { cursor: pointer; display: block; float: left; height: 16px; overflow: hidden; width: 120px; margin: 4px 0 0 0; } .login-state-trigger2 { margin: 10px 0 0 20px; } .login-state-down { background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent; float: left; height: 6px; margin-top: 5px; overflow: hidden; text-indent: -999em; width: 7px; } .login-state-show { float: left; height: 14px; overflow: hidden; text-indent: -999em; width: 14px; margin: 1px 4px 0 0; } .login-state-txt { float: left; margin-left: 5px; font-size: 12px; >line-height:18px!important; } .login-state .callme { background: url("../images/ptlogin.png") -72px 0 no-repeat; } .login-state .online { background: url("../images/ptlogin.png") 0 0 no-repeat; } .login-state .away { background: url("../images/ptlogin.png") -18px 0 no-repeat; } .login-state .busy { background: url("../images/ptlogin.png") -36px 0 no-repeat; } .login-state .silent { background: url("../images/ptlogin.png") -108px 0 no-repeat; } .login-state .hidden { background: url("../images/ptlogin.png") -54px 0 no-repeat; } .statePanel { display: none; position: absolute; right: 68px; top: 193px; z-index: 10; margin: 0; border-width: 1px; border-style: solid; border-color: #ccc #6a6a6a #666 #cdcdcd; padding: 0; width: 100px; height: 133px; overflow: hidden; background: white; font-size: 12px; line-height: 1.5; } .statePanel .statePanel_li { display: block; float: left; margin: 0; padding: 3px 0; width: 100px; height: 16px; line-height: 16px; overflow: hidden; zoom: 1; cursor: pointer; } .stateSelect_icon { float: left; margin: 2px 0 0 5px; width: 14px; height: 14px; overflow: hidden; } .stateSelect_text { margin: 0 0 0 22px; } .bottomDiv { margin-left: 70px; } .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')}3.js/drag.js:
function getByClass(clsName,parent){ var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsName){ eles.push(elements[i]); } } return eles;}window.onload=drag;function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; // Drag oTitle.onmousedown=fnDown; // Close var oClose=document.getElementById('ui_boxyClose'); oClose.onclick=function(){ document.getElementById('loginPanel').style.display='none'; } // Switch state var loginState=document.getElementById('loginState'), stateList=document.getElementById('loginStatePanel'), lis=stateList.getElementsByTagName('li'), stateTxt=document.getElementById('login2qq_state_txt'), loginStateShow=document.getElementById('loginStateShow'); loginState.onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } stateList.style.display='block'; } // For(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover=function(){ this.style.background='#567'; } lis[i].onmouseout=function(){ this.style.background='#FFF'; } lis[i].onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } var id=this.id; stateList.style.display='none'; stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML; loginStateShow.className=''; loginStateShow.className='login-state-show '+id; } } document.onclick=function(){ stateList.style.display='none'; }}function fnDown(event){ event = event || window.event; var oDrag=document.getElementById('loginPanel'), // When the cursor presses the distance between the cursor and the panel is disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; // Move document.onmousemove=function(event){ event = event || window.event; fnMove(event,disX,disY); } // Release the mouse document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }}function fnMove(e,posX,posY){ var oDrag=document.getElementById('loginPanel'), l=e.clientX-posX, t=e.clientY-posY, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight || document.body.clientHeight, maxW=winW-oDrag.offsetWidth-10, maxH=winH-oDrag.offsetHeight; if(l<0){ l=0; }else if(l>maxW){ l=maxW; } if(t<0){ t=10; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top=t+'px';}4. Finally, the required image files
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.