Saya telah menggunakan Tencent QQ selama hampir sepuluh tahun. Hari ini, saya telah mencoba meniru panel login Tencent QQ untuk membuat versi web panel login. Lalu saya merujuk pada beberapa kode, meniru sendiri, dan belajar menulisnya.
Efeknya adalah sebagai berikut:
Itu juga menyadari efek menyeret panel dan memilih status
Ini kode spesifiknya:
1.index.html
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <itement> seret </iteme> <link href = "css/main.css" rel = "stylesheet"/<script script/js/jss/rel = "stylesheet"/<script script = "js/jss/rel =" stylesheet "/<cript script/js/js/jsss/rel <" jskss/jskss " id = "LoginPanel"> <div style = "posisi: relatif; z-index: 1;"> <div id = "ui_boxyclose"> </div> </div> <v div> <div> <span> akun: </span> <span> <input autocomplete = "on" name = "u" u "u" u "type" TOPE " value = "QQ Number atau akun email" onFocus = "if (value == 'qq nomor atau akun email') {value = ''}" onblur = "if (value == '') {value = 'qq number atau email akun';}"/> </span> </div> <Div> <span> Kata Sandi: </span> </input "" Panjang = "Panjang =" PENTING = "PINGMUR =" PENTING = "PENGTAR =" PENTING = "PENTING =" PENTING = "PENTING =" PENTAN "PENTING =" PENTAN "PENTING =" PENTFLET = "PENTAN =" PENTFLET = " TabIndex = "2"/> </span> </div> </div> <div> <div style = "float: left"> </div> <v> <div id = "LoginState"> <Div ID = "LoginStatesHow"> Status </Div> <d Div> di bawah </Div> <Div> <Div ID = "LOGIN2QQ_ <DIV> </DIV> </DIV> <DIV> <DIV ID =" LOGIN2QQ_ST </DIV> </DIV> <DIV> <DIV ID = "LOGIN2QQ_ST </DIV> </DIV> <DIV> <DIV ID =" LOGIN2QQER </DIV> </DIV> </DIV> <DIV> <DIV ID = "LOGIN2 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"> <dv> </div> <div> sibuk </div> </li> <li id = "silent"> <div> </div> <div> jangan ganggu </div> </li> <li id = "tersembunyi"> <v> </dv> </Div> </v> </li> </ul </div> </Div> </Div> </Div> </li> </Ul </Div> </Div> </Div> </Div> </li> </ul </Div> </Div> </Div> </li> </Ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>2.CSS/Main.CSS:
.loginpanel {width: 380px; Tinggi: 247px; Kiri: 400px; Atas: 120px; Posisi: Absolute; Perbatasan: 1px solid #ccc; Latar belakang: #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; Kotak-Shadow: 0 0 8px #000; } .login_logo_webqq {latar belakang: url ('../ gambar/login_window_logo.png') no -repeat -210px -0px; margin-kiri: 100px; margin-top: 10px; Lebar: 200px; Tinggi: 44px; Kursor: Pindah; } .inputs {font: bold 15px Arial; margin-kiri: 80px; margin-top: 30px; } .input .Sign-input {Padding-bottom: 20px; } .inputs .Sign-input input {width: 170px; Perbatasan: 1px #ccc solid; Warna: #868686; font-size: 16px; padding: 2px; -Moz-border-Radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -BORDER-Radius: 10px; -BORDER-Radius: 10px; Garis Besar: Tidak Ada; } .btn {latar belakang: url ("../ gambar/login_btn.png") no -rePeat -111px 0; Lebar: 111px; Tinggi: 36px; Perbatasan: 0; Teks-Align: tengah; Line-Height: 20px; Warna: #0c4e7c; kursor: pointer; margin-kiri: 14px; } .login-state-trigger {kursor: pointer; Tampilan: Blok; float: kiri; Tinggi: 16px; meluap: tersembunyi; Lebar: 120px; Margin: 4px 0 0 0; } .login-state-trigger2 {margin: 10px 0 0 20px; } .login-state-down {background: url ("../ gambar/ptlogin.png") no-repeat scroll 0 -22px transparan; float: kiri; Tinggi: 6px; margin-top: 5px; meluap: tersembunyi; Text -Indent: -999em; Lebar: 7px; } .login-state-show {float: left; Tinggi: 14px; meluap: tersembunyi; Text -Indent: -999em; Lebar: 14px; Margin: 1px 4px 0 0; } .login-state-txt {float: left; margin-kiri: 5px; font-size: 12px; > Line-Height: 18px! Penting; } .login-state .callme {latar belakang: url ("../ gambar/ptlogin.png") -72px 0 no-repeat; } .login-state .online {latar belakang: url ("../ gambar/ptlogin.png") 0 0 no-rePeat; } .login-state .away {latar belakang: url ("../ gambar/ptlogin.png") -18px 0 no-repeat; } .login-state .busy {latar belakang: url ("../ gambar/ptlogin.png") -36px 0 no-repeat; } .login-state .silent {latar belakang: url ("../ gambar/ptlogin.png") -108px 0 no-repeat; } .login-state .hidden {latar belakang: url ("../ gambar/ptlogin.png") -54px 0 no-repeat; } .statepanel {display: none; Posisi: Absolute; Kanan: 68px; Atas: 193px; z-index: 10; Margin: 0; Perbatasan-lebar: 1px; Gaya perbatasan: solid; Border-color: #CCC #6A6A6A #666 #CDCDCD; Padding: 0; Lebar: 100px; Tinggi: 133px; meluap: tersembunyi; Latar Belakang: Putih; font-size: 12px; Line-Height: 1.5; } .statepanel .statepanel_li {display: block; float: kiri; Margin: 0; Padding: 3px 0; Lebar: 100px; Tinggi: 16px; Line-Height: 16px; meluap: tersembunyi; Zoom: 1; kursor: pointer; } .stateselect_icon {float: left; margin: 2px 0 0 5px; Lebar: 14px; Tinggi: 14px; meluap: tersembunyi; } .stateselect_text {margin: 0 0 0 22px; } .bottomdiv {margin-left: 70px; } .ui_boxyclose {width: 28px; tinggi: 28px; Posisi: absolute; atas: -10px; kanan: -10px; kursor: pointer; latar belakang: url ('../ gambar/boxy_btn.png') no-repeat; z-index: 1} .ie6_0 .ui_boxyclose {latar belakang: 0; filter: progid: dximagetransform.microsoft.alphaimageloader (src = 'boxy_btn.png', sizingMethod = 'skala')}3.js/drag.js:
function getByClass (clsname, induk) {var oparent = parent? document.geteLementById (induk): dokumen, eles = [], elemen = oparent.geteLementsbyTagname ('*'); untuk (var i = 0, l = elemen.lements; i <l; i ++) {if (elemen [i] .className == clsname) {eles.push (elemen [i]); }} return eles;} window.onload = drag; function drag () {var otitle = getByclass ('login_logo_webqq', 'loginpanel') [0]; // seret otitle.onmousedown = fndown; // tutup var oclose = document.geteLementById ('ui_boxyclose'); oclose.onClick = function () {document.getElementById ('LoginPanel'). style.display = 'none'; } // switch status var loginState = document.geteLementById ('LoginState'), stateList = document.geteLementById ('LoginStatePanel'), lis = statelist.getElementsByTagname ('li'), statetxt = document.getElementById ('LOGIN2QQ_STATE_TXT'), 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'; } // untuk (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'), // Ketika kursor menekan jarak antara kursor dan panel disx = event.clientx-odrag.offsetleft, disy = event.clienty-odrag.offsettop; // pindahkan document.onmouseMove = function (event) {event = event || window.event; fnmove (acara, disx, disy); } // lepaskan 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; } lain jika (t> maxh) {t = maxh; } odrag.style.left = l+'px'; odrag.style.top = t+'px';}4. Akhirnya, file gambar yang diperlukan
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.