나는 거의 10 년 동안 Tencent QQ를 사용해 왔습니다. 오늘 저는 Tencent QQ의 로그인 패널을 모방하여 로그인 패널의 웹 버전을 만들려고 노력했습니다. 그런 다음 몇 가지 코드를 언급하고 직접 모방하고 글을 쓰는 법을 배웁니다.
효과는 다음과 같습니다.
또한 패널을 드래그하고 상태를 선택하는 효과를 알고 있습니다.
특정 코드는 다음과 같습니다.
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 = </scrip> </scrip> </script> </script> </script> </script> <div id = "loginpanel"> <div style = "위치 : 상대; z-index : 1;"> <div id = "ui_boxyclose"> </div> </div> <div> <div> <span> 계정 : </span </span </span </span a autocomplete = "on"u "id ="u "tabe"syle " value = "qq 번호 또는 이메일 계정"onfocus = "if (value == 'qq 번호 또는 이메일 계정") {value =' '} "onblur ="if (value ==' ') {value ='qq 번호 또는 이메일 계정 ';} "/> </span> </div> <div> <span> password : </span <input name> <input name ="p "p"p "p"p "p"phan tabindex = "2"/> </span> </div> </div> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div "> </div> <div> <div id ="loginstate "> <div id ="loginstateshow "> status </div> <div> <div> out </div> <div> <div> <div> <lodin2qq_state_txt "> id = "loginstatepanel"style = "display : none"> <li id = "online"> <div> </div> <div> 나는 온라인 </li> <li> <li id = "callme"> <div> </div> <div> q me </li> <li id = "Away"> <li "> div> </div </li> <li id =" "" "> <div> </div> <div> busy </div> </li> <li id = "Silent"> <div> </div> <div> 방해하지 마십시오 </div> </li> <li id = "hidden"> <div> </div> <div> Invisible </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>2.CSS/Main.CSS :
.LoginPanel {너비 : 380px; 높이 : 247px; 왼쪽 : 400px; 상단 : 120px; 위치 : 절대; 국경 : 1px Solid #CCC; 배경 : #f6f6f6; -Moz 국경 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 {배경 : url ( '../ images/login_window_logo.png') no -Repeat -210px -0px; 마진 왼쪽 : 100px; 마진-탑 : 10px; 너비 : 200px; 높이 : 44px; 커서 : 이동; } .inputs {font : bold 15px arial; 마진 왼쪽 : 80px; 마진 탑 : 30px; } .inputs .Sign-input {Padding-Bottom : 20px; } .inputs .sign-input input {width : 170px; 국경 : 1px #CCC Solid; 색상 : #868686; 글꼴 크기 : 16px; 패딩 : 2px; -Moz 국경 Radius : 10px; -webkit-border-radius : 10px; -khtml-border-radius : 10px; -Border-Radius : 10px; -Border-Radius : 10px; 개요 : 없음; } .btn {배경 : url ( "../ images/login_btn.png") no -Repeat -111px 0; 너비 : 111px; 높이 : 36px; 국경 : 0; 텍스트 정렬 : 센터; 라인 높이 : 20px; 색상 : #0C4E7C; 커서 : 포인터; 마진 왼쪽 : 14px; } .Login-State-Trigger {커서 : 포인터; 디스플레이 : 블록; 플로트 : 왼쪽; 높이 : 16px; 오버플로 : 숨겨진; 너비 : 120px; 여백 : 4px 0 0; } .Login-State-Trigger2 {마진 : 10px 0 20px; } .login-state-down {background : url ( "../ images/ptlogin.png") No-Repeat 스크롤 0 -22px Transparent; 플로트 : 왼쪽; 높이 : 6px; 마진-탑 : 5px; 오버플로 : 숨겨진; 텍스트 안정 : -999EM; 너비 : 7px; } .login-state-show {float : 왼쪽; 높이 : 14px; 오버플로 : 숨겨진; 텍스트 안정 : -999EM; 너비 : 14px; 여백 : 1px 4px 0 0; } .login-state-txt {float : 왼쪽; 마진 왼쪽 : 5px; 글꼴 크기 : 12px; > 라인 높이 : 18px! 중요; } .login-state .callme {background : url ( "../ images/ptlogin.png") -72px 0 No-Repeat; } .login-state .online {배경 : url ( "../ images/ptlogin.png") 0 0 No-Repeat; } .login-state .away {배경 : 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 {배경 : url ( "../ images/ptlogin.png") -54px 0 No-Repeat; } .StatePanel {디스플레이 : 없음; 위치 : 절대; 오른쪽 : 68px; 상단 : 193px; z- 인덱스 : 10; 여백 : 0; 국경비 : 1px; 국경 스타일 : 단단한; Border-Color : #CCC #6A6A6A #666 #CDCDCD; 패딩 : 0; 너비 : 100px; 높이 : 133px; 오버플로 : 숨겨진; 배경 : 흰색; 글꼴 크기 : 12px; 라인 높이 : 1.5; } .StatePanel .statePanel_li {display : 블록; 플로트 : 왼쪽; 여백 : 0; 패딩 : 3px 0; 너비 : 100px; 높이 : 16px; 라인 높이 : 16px; 오버플로 : 숨겨진; 줌 : 1; 커서 : 포인터; } .statesElect_icon {float : 왼쪽; 여백 : 2px 0 5px; 너비 : 14px; 높이 : 14px; 오버플로 : 숨겨진; } .statesElect_text {마진 : 0 0 22PX; } .BottomDiv {마진-왼쪽 : 70px; } .ui_boxyclose {너비 : 28px; 높이 : 28px; 위치 : 절대; 상단; 상단 : -10px; 오른쪽 : -10px; 커서 : 포인터; 배경 : url ( '../ images/boxy_btn.png') no-Repeat; z-index : 1} .ie6_0 .ui_boxyclose {background : 0; 필터 : progid : dximagetransform.microsoft.alphaimageloader (src = 'boxy_btn.png', sizateMethod = 'scale')}3.js/drag.js :
함수 getByClass (clsname, parent) {var oparent = parent? document.getElementById (부모) : docum for (var i = 0, l = elements.lenmes; i <l; i ++) {if (elements [i] .classname == clsname) {eles.push (elements [i]); }} return eles;} wind // otitle.onmousedown = fndown을 드래그합니다. // var oclose = document.getElementById ( 'ui_boxyclose'); oclose.onclick = function () {document.getElementById ( 'loginPanel'). style.display = 'none'; } // State State var var loginstate = document.getElementById ( 'loginstate'), statelist = document.getElementById ( 'loginStatePanel'), lis = statelist.getementsByTagName ( '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 = '블록'; } // 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'; }} 함수 fndown (이벤트) {event = event || Window.event; var odrag = docum // document.onmouseMove = function (event) {event = event || Window.event; fnmove (이벤트, disx, disy); } // 마우스 문서를 릴리스합니다 .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-dodrag.offsetWidth-10, maxh = winh-dodrag.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. 마지막으로 필요한 이미지 파일입니다
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.