Eu uso o TENCENT QQ há quase dez anos. Hoje, tenho tentado imitar o painel de login da Tencent QQ para criar uma versão da Web do painel de login. Então me refiro a algum código, imito -o e aprendo a escrever um.
Os efeitos são os seguintes:
Ele também percebe o efeito de arrastar o painel e selecionar o status
Aqui está o código específico:
1.Index.html
<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> arraste </title> <link href = "css/main.css" rel = "Stylesheet"/> <script = src = "css/main.css" Rel = "Stylesheet"/> <Cript> <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 = "Número qq ou conta de email" onfocus = "if (value == 'Número qq ou conta de email') {value = ''}" onblur = "if (value == '') {value = 'qq Número ou conta de email';}"/> </span> </div> <div> <d span> senha: </span <span> <nput "/"/> </span> </div> tabindex = "2"/> </span> </div> </div> <div> <div style = "float: esquerd"> </div> <div> <div id = "logInstate"> <div id = "LoginStateshow"> status </div> <div> <div> em </div> <div> <diD) status "> status </div> <div> <div> em </div> <div> <diD) id = "LogInstatePanel" style = "Display: None"> <li id = "online"> <div> </div> <div> estou online </div> </li> <li id = "callme"> <div> </div> <div> q me </div </li> <li id id = "> <Div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>2.css/main.css:
.LoginPanel {Width: 380px; Altura: 247px; Esquerda: 400px; Top: 120px; Posição: Absoluto; borda: 1px sólido #ccc; Antecedentes: #f6f6f6; -Moz-Border-Radius: 10px; -Webkit-Border-Radius: 10px; Radio de fronteira: 10px; -moz-box-shadow: 0 0 8px #000; -webkit-box-shadow: 0 0 8px #000; Shadow Box: 0 0 8px #000; } .login_logo_webqq {background: url ('../ imagens/login_window_logo.png') no -repetir -210px -0px; margem-esquerda: 100px; Margin-top: 10px; Largura: 200px; Altura: 44px; Cursor: Mova; } .inputs {font: Bold 15px Arial; margem-esquerda: 80px; Margin-top: 30px; } .inputs .Sign-Input {Padding-Bottom: 20px; } .Inputs .Sign-entrada de entrada {largura: 170px; Border: 1px #ccc sólido; Cor: #868686; Size da fonte: 16px; preenchimento: 2px; -Moz-Border-Radius: 10px; -Webkit-Border-Radius: 10px; -khtml-border-radius: 10px; -D-Radius: 10px; -D-Radius: 10px; Esboço: Nenhum; } .btn {background: url ("../ imagens/login_btn.png") sem repetição -111px 0; Largura: 111px; Altura: 36px; borda: 0; Alinhamento de texto: centro; altura de linha: 20px; Cor: #0C4E7C; Cursor: Ponteiro; margem-esquerda: 14px; } .Login-State-Trigger {Cursor: Pointer; exibição: bloco; flutuar: esquerda; Altura: 16px; estouro: oculto; Largura: 120px; margem: 4px 0 0 0; } .Login-State-Trigger2 {margem: 10px 0 0 20px; } .Login-State-Down {Background: url ("../ Images/ptlogin.png") Scroll sem repetição 0 -22px transparente; flutuar: esquerda; Altura: 6px; Margin-top: 5px; estouro: oculto; Indent Text: -999em; Largura: 7px; } .Login-State-show {float: esquerda; Altura: 14px; estouro: oculto; Indent Text: -999em; Largura: 14px; margem: 1px 4px 0 0; } .Login-state-txt {float: esquerda; margem-esquerda: 5px; tamanho de fonte: 12px; > altura de linha: 18px! IMPORTANTE; } .Login-State .Callme {Background: url ("../ Images/ptlogin.png") -72px 0 No-REPEAT; } .Login-State .Online {Background: url ("../ Images/ptlogin.png") 0 0 No-repetir; } .Login-State .away {Background: url ("../ Images/ptlogin.png") -18px 0 No-repetir; } .Login-State .Busy {Background: url ("../ Images/ptlogin.png") -36px 0 sem repetição; } .Login-State .silent {Background: url ("../ Images/ptlogin.png") -108px 0 No-repetir; } .Login-State .hidden {Background: url ("../ Images/ptlogin.png") -54px 0 No-repetir; } .StatePanel {Display: Nenhum; Posição: Absoluto; Direita: 68px; TOP: 193px; Z-Index: 10; margem: 0; largura de borda: 1px; estilo de fronteira: sólido; Border-Color: #CCC #6A6A6A #666 #CDCDCD; preenchimento: 0; Largura: 100px; Altura: 133px; estouro: oculto; Antecedentes: Branco; tamanho de fonte: 12px; altura da linha: 1,5; } .StatePanel .StatePanel_li {Display: Block; flutuar: esquerda; margem: 0; preenchimento: 3px 0; Largura: 100px; Altura: 16px; altura da linha: 16px; estouro: oculto; zoom: 1; Cursor: Ponteiro; } .StateSelect_icon {float: esquerda; margem: 2px 0 0 5px; Largura: 14px; Altura: 14px; estouro: oculto; } .stateselect_text {margem: 0 0 0 22px; } .bottomdiv {margin-left: 70px; } .ui_boxyclose {largura: 28px; altura: 28px; posição: absoluto; topo: -10px; direita: -10px; cursor: ponteiro; fundo: url ('../ imagens/boxy_btn.png') no-repeat; z-index: 1} .ie6_0 .ui_boxyclose {background: 0; filtro: progid: dxxETransform.microsoft.alphaimageloader (src = 'boxy_btn.png', sizingmethod = 'scale')}3.js/drag.js:
function getByClass (clsname, pai) {var oparent = pai? para (var i = 0, l = elementos.Length; i <l; i ++) {if (elementos [i] .className == clsname) {elees.push (elementos [i]); }} retorna eles;} window.onload = drag; function drag () {var otitle = getByClass ('login_logo_webqq', 'loginpanel') [0]; // arrastar otitle.onmousedown = fndown; // fechar var oclose = document.getElementById ('ui_boxyclose'); oclose.OnClick = function () {document.getElementById ('loginpanel'). style.display = 'nenhum'; } // 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 = 'bloco'; } // 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 = 'nenhum'; statetxt.innerhtml = getByClass ('statesElect_text', id) [0] .innerhtml; logInstateshow.className = ''; LogInstateshow.className = 'Login-State-Show'+id; }} document.onclick = function () {statelist.style.display = 'nenhum'; }} função fndown (event) {event = event || Window.Event; var odrag = document.getElementById ('loginpanel'), // Quando o cursor pressiona a distância entre o cursor e o painel é disx = event.clientx-odrag.offsetleft, disy = event.clienty-odrag.offsettop; // mover document.onMousEmove = function (event) {event = event || Window.Event; fnmove (evento, disx, disy); } // Libere o 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. Finalmente, os arquivos de imagem necessários
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.