He estado usando Tencent QQ durante casi diez años. Hoy, he estado tratando de imitar el panel de inicio de sesión de Tencent QQ para hacer una versión web del panel de inicio de sesión. Luego me refiero a algún código, imito yo mismo y aprendo a escribir uno.
Los efectos son los siguientes:
También se da cuenta del efecto de arrastrar el panel y seleccionar el estado
Aquí está el código específico:
1.Index.html
< <div id = "loginpanel"> <div style = "posición: relativo; z-index: 1;"> <div id = "ui_boxyClose"> </div> </div> <div> <div> <div> <span> cuenta: </span> <span> <put autocomplete = "en" name = "u" id = "u" type = "text" syle "=" ime-mode-mode: iM-mode-mode: desablex = "DISEDED". valor = "número de qq o cuenta de correo electrónico" onfocus = "if (value == 'Qq número o cuenta de correo electrónico') {value = '' '}" onblur = "if (value ==' '') {value = 'Qq número o cuenta de correo electrónico';}"/> </pan> </div> <div> <pass> contraseña: </span> <pane> <input name = "p" p "p" p "p" "p" "ppane" 16 "16" 16 "16" 16 ". tabindex = "2"/> </span> </div> </iv> <div> <div style = "float: izquierda"> </div> <div> <div id = "loginstate"> <div id = "loginstateshow"> status </div> <div> <div> bajo </div> <div> <d "id =" login2qq_state_txt "> </div> id = "loginstatepanel" style = "display: none"> <li id = "en línea"> <div> </div> estoy en línea </div> </li> <li id = "callMe"> <div> </div> <div> q me </li> <li Id = "lejos"> <div> </div> <div> licencia </li> <li> <Viv> </div> <viv> ocupado </div> </li> <li id = "silencio"> <div> </div> <div> no molestar </div> </li> <li id = "hidden"> <div> </div> <div> invisible </li> </ul> </div> </div> </div> </biv> </div divis. </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>2.css/main.css:
.loginpanel {ancho: 380px; Altura: 247px; Izquierda: 400px; Arriba: 120px; Posición: Absoluto; borde: 1px sólido #ccc; Antecedentes: #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; Shadow de caja: 0 0 8px #000; } .login_logo_webqq {fondos: url ('../ imágenes/login_window_logo.png') no -repeat -210px -0px; margen-izquierda: 100px; margen-top: 10px; Ancho: 200px; Altura: 44px; cursor: mover; } .Inputs {Font: Bold 15px Arial; margen-izquierda: 80px; margen-top: 30px; } .Inputs .Sign-Input {Padding-Bottom: 20px; } .Inputs .Sign-Input Enume {Width: 170px; borde: 1px #ccc sólido; Color: #868686; tamaño de fuente: 16px; relleno: 2px; -Moz-Border-Radius: 10px; -WebKit-Border-Radius: 10px; -khtml-border-radio: 10px; -Border-Radius: 10px; -Border-Radius: 10px; Esquema: ninguno; } .btn {fondo: url ("../ imágenes/login_btn.png") No -repeat -111px 0; Ancho: 111px; Altura: 36px; borde: 0; Text-Align: Center; Línea de altura: 20px; Color: #0C4E7C; cursor: puntero; margen-izquierda: 14px; } .login-state-trigger {cursor: pointer; Pantalla: bloque; flotante: izquierda; Altura: 16px; desbordamiento: oculto; Ancho: 120px; margen: 4px 0 0 0; } .login-state-trigger2 {margen: 10px 0 0 20px; } .login-state-down {fondos: url ("../ images/ptlogin.png") no se repite scroll 0 -22px transparent; flotante: izquierda; Altura: 6px; margen-top: 5px; desbordamiento: oculto; Text -Indent: -999em; Ancho: 7px; } .login-state-show {float: izquierda; Altura: 14px; desbordamiento: oculto; Text -Indent: -999em; Ancho: 14px; margen: 1px 4px 0 0; } .login-state-txt {float: izquierda; margen-izquierda: 5px; tamaño de fuente: 12px; > Línea de altura: 18px! Importante; } .login-state .CallMe {fondo: url ("../ images/ptlogin.png") -72px 0 no-repeat; } .login-state .Online {fondo: url ("../ images/ptlogin.png") 0 0 sin-repeat; } .login-state .Away {fondo: url ("../ images/ptlogin.png") -18px 0 no-repeat; } .login-state .busy {fondo: url ("../ images/ptlogin.png") -36px 0 no-repeat; } .login-state .silent {fondo: url ("../ images/ptlogin.png") -108px 0 no-repeat; } .login-state .hidden {fondo: url ("../ images/ptlogin.png") -54px 0 no-repeat; } .StatePanel {Display: None; Posición: Absoluto; Derecha: 68px; Arriba: 193px; Índice Z: 10; margen: 0; ancho fronterizo: 1px; estilo fronterizo: sólido; color de borde: #ccc #6a6a6a #666 #cdcdcd; relleno: 0; Ancho: 100px; Altura: 133px; desbordamiento: oculto; Fondo: blanco; tamaño de fuente: 12px; Alganche de línea: 1.5; } .StatePanel .StatePanel_li {display: block; flotante: izquierda; margen: 0; relleno: 3px 0; Ancho: 100px; Altura: 16px; Línea de altura: 16px; desbordamiento: oculto; Zoom: 1; cursor: puntero; } .stateselect_icon {float: izquierda; margen: 2px 0 0 5px; Ancho: 14px; Altura: 14px; desbordamiento: oculto; } .stateselect_text {margen: 0 0 0 22px; } .bottomdiv {margen-izquierda: 70px; } .ui_boxyclose {ancho: 28px; altura: 28px; posición: absoluto; top: -10px; derecha: -10px; cursor: pointer; fondos: url ('../ images/boxy_btn.png') no-repeat; z-index: 1} .ie6_00 .ui_boxyclose {fondo: 0; filtro: progid: dximagetransform.microsoft.alphaimageloader (src = 'boxy_btn.png', dimensionador = 'escala')}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]; // arrastrar otitle.onmousedown = fndown; // cerrar 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 ('login2qqq_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 = 'bloque'; } // 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'), // Cuando el cursor presiona la distancia entre el cursor y el panel es disx = event.clientx-nog.offsetleft, disy = event.clienty-dodrag.offsettop; // Mover document.onmouseMove = function (event) {event = event || Window.event; fnmove (evento, disx, disy); } // libera el mouse document.onmouseUp = function () {document.onmouseMove = null; document.onmouseUp = null; }} función 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-nog.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. Finalmente, los archivos de imagen requeridos
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.