J'utilise Tencent QQ depuis près de dix ans. Aujourd'hui, j'ai essayé d'imiter le panneau de connexion de Tencent QQ pour créer une version Web du panneau de connexion. Ensuite, je me réfère à un code, je l'imite moi-même et j'apprends à en écrire un.
Les effets sont les suivants:
Il réalise également l'effet de la traînée du panneau et de la sélection de l'état
Voici le code spécifique:
1.Index.html
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <Title> glisser </ title> <link href = "css / main.css" rel = "StyleSheet" /> <script src = "js / drag.js"> </ </ script> src = "js / drag.js"> </ </ script> src = "js / glisser. id = "LoginPanel"> <div style = "position: relative; z-index: 1;"> <div id = "ui_boxyclose"> </ div> </ div> <div> <v> <v> <span> compte: </span> <span> <entrée autocompletete = "sur" name = "u" id = "u" type = "text" style = " Value = "QQ Number ou Email Account" onFocus = "if (value == 'QQ NUBER OU COMPLE ENREAL') {valeur = ''}" OnBlur = "if (value == '') {value = 'qq numéro ou compte de messagerie';}" /> </span> </ div> <div> <pan> mot de passe: </span> <spande> <preny name = "p" id = "p" p "16" 16 " tabindex = "2" /> </ span> </ div> </ div> <div> <div style = "float: Left"> </ div> <div> <div id = "Loginstate"> <div id = "Loginstateshow"> Status </ div> <div> <div> sous </ div> <v> <div id = "Login2qq_state_txt"> en ligne </ div> <iv> id = "LoginStatePanel" style = "affichage: aucun"> <li id = "en ligne"> <div> </ div> <div> Je suis en ligne </ div> </li> <li id = "callme"> <v> </div> <v> Q me </div> </li> <li id = "extérieure"> <v> </v> <v> quitter </v> <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> </odody> </html>2.css / main.css:
.loginPanel {largeur: 380px; hauteur: 247px; Gauche: 400px; En haut: 120px; Position: absolue; Border: 1px solide #ccc; Contexte: # 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; marge-gauche: 100px; marge: 10px; Largeur: 200px; hauteur: 44px; curseur: déplacer; } .Inputs {Font: Bold 15px Arial; marge-gauche: 80px; marge: 30px; } .Inputs .Sign-Input {Padding-Bottom: 20px; } .Inputs .Sign-INPUT Input {width: 170px; Border: 1px #ccc solide; Couleur: # 868686; taille de police: 16px; rembourrage: 2px; -Moz-Border-Radius: 10px; -Webkit-Border-Radius: 10px; -Khtml-Border-Radius: 10px; -Borter-radius: 10px; -Borter-radius: 10px; Aperçu: aucun; } .btn {background: url ("../ images / login_btn.png") sans répétition -111px 0; Largeur: 111px; hauteur: 36px; bordure: 0; Texte-aligne: Centre; hauteur de ligne: 20px; Couleur: # 0C4E7C; curseur: pointeur; marge-gauche: 14px; } .login-state-trgerg {cursor: pointer; Affichage: bloc; flottant: à gauche; hauteur: 16px; débordement: caché; Largeur: 120px; marge: 4px 0 0 0; } .login-state-trgerg2 {margin: 10px 0 0 20px; } .login-state-down {background: url ("../ images / ptlogin.png") sans repaire de réflexion 0 -22px transparent; flottant: à gauche; hauteur: 6px; marge: 5px; débordement: caché; Texte-indent: -999em; Largeur: 7px; } .login-state-show {float: Left; hauteur: 14px; débordement: caché; Texte-indent: -999em; Largeur: 14px; marge: 1px 4px 0 0; } .login-state-txt {float: gauche; marge-gauche: 5px; taille de police: 12px; > HEURT DE LIGNE: 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 {affichage: aucun; Position: absolue; À droite: 68px; En haut: 193px; Z-Index: 10; marge: 0; largeur de bordure: 1px; Style de la frontière: solide; Border-Color: #CCC # 6A6A6A # 666 #CDCDCD; rembourrage: 0; Largeur: 100px; hauteur: 133px; débordement: caché; Contexte: blanc; taille de police: 12px; hauteur de ligne: 1,5; } .StatePanel .StatePanel_li {affichage: bloc; flottant: à gauche; marge: 0; rembourrage: 3px 0; Largeur: 100px; hauteur: 16px; Heure de ligne: 16px; débordement: caché; Zoom: 1; curseur: pointeur; } .StateSelect_Icon {float: Left; marge: 2px 0 0 5px; Largeur: 14px; hauteur: 14px; débordement: caché; } .StateSelect_text {margin: 0 0 0 22px; } .bottomDiv {margin-left: 70px; } .ui_boxyclose {width: 28px; hauteur: 28px; position: absolu; en haut: -10px; droit: -10px; curseur: pointeur; fond: 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', sizeMethod = '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 = glisser; function glisser () {var otitter = getByClass ('login_logo_webqq', 'loginpanel') [0]; // glisser oTitle.onmousedown = fndown; // clôture var oclose = document.getElementById ('ui_boxyclose'); oclose.onclick = function () {document.getElementById ('LoginPanel'). Style.display = 'Aucun'; } // Switch State var Loginstate = Document.getElementById ('Loginstate'), StateList = Document.getElementById ('LoginStatePanel'), LIS = stateList.getElementsByTagName ('Li'), StateTxt = Document.getElementByid ('Login2qq_State_Txt'),, Document.getElementyid ('Login2qq_State_Txt'),, Document.getElementyid ('Login2Q_State_Txt'),, Document.getElementyid ('Login2Q_State_Txt'),, Document.getElementyid ('Login2qq_State_Txt'),, LoginStateShow = document.getElementById («LoginStatesHow»); loginstate.onclick = fonction (e) {e = e || window.event; if (e.stoppropagation) {e.stoppropagation (); } else {e.cancelbubble = true; } stateList.style.display = 'bloc'; } // 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 = fonction (e) {e = e || window.event; if (e.stoppropagation) {e.stoppropagation (); } else {e.cancelbubble = true; } var id = this.id; stateList.style.display = 'Aucun'; StateTxt.InnerHtml = GetByClass ('StatesElect_Text', ID) [0] .InnerHtml; LoginstatesHow.ClassName = ''; LoginstatesHow.ClassName = 'Login-State-Show' + ID; }} document.onclick = function () {stateList.style.display = 'Aucun'; }} fonction fndown (event) {event = event || window.event; var odrag = document.getElementById ('LoginPanel'), // Lorsque le curseur appuie sur la distance entre le curseur et le panneau est disx = event.clientx-odrag.offsetleft, disy = event.clienty-odrag.offSetTop; // déplacer document.onMouSemove = function (event) {event = event || window.event; fnmove (événement, disx, disy); } // Libérez le document de souris.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; }} fonction 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. Enfin, les fichiers d'image requis
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.