ฉันใช้ Tencent QQ มาเกือบสิบปีแล้ว วันนี้ฉันพยายามเลียนแบบแผงเข้าสู่ระบบของ Tencent QQ เพื่อสร้างแผงเข้าสู่ระบบเวอร์ชันเว็บ จากนั้นฉันก็อ้างถึงรหัสบางอย่างเลียนแบบตัวเองและเรียนรู้ที่จะเขียนหนึ่ง
ผลกระทบมีดังนี้:
นอกจากนี้ยังตระหนักถึงผลกระทบของการลากแผงและเลือกสถานะ
นี่คือรหัสเฉพาะ:
1.index.html
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> ลาก </title> <link href = "css/main.css" rel = "Stylesheet"/> id = "loginPanel"> <div style = "ตำแหน่ง: สัมพัทธ์; z-index: 1;"> <div id = "ui_boxyclose"> </div> </div> <div> <div> <pan> <pan> บัญชี: </span> value = "หมายเลข qq หรือบัญชีอีเมล" onfocus = "ถ้า (value == 'หมายเลข qq หรือบัญชีอีเมล') {value = ''}" onblur = "ถ้า (value == '') {value = 'หมายเลข QQ หรือบัญชีอีเมล';}"/> tabIndex = "2"/> </span> </div> </div> </div> <div style = "float: left"> </div> <div> <div id = "loginState"> <div id = "loginstateshow"> สถานะ </div> <div> <div> id = "LoginStatePanel" style = "Display: none"> <li id = "online"> <div> </div> <div> ฉันออนไลน์ </div> </li> <li id = "callme"> <div> </div> </div> q </div> </li> <div> </div> <div> ไม่ว่าง </div> </li> <li id = "silent"> <div> </div> <div> อย่ารบกวน </div> </li> <li id = "ซ่อน"> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>2.CSS/MAIN.CSS:
.loginpanel {Width: 380px; ความสูง: 247px; ซ้าย: 400px; ด้านบน: 120px; ตำแหน่ง: สัมบูรณ์; ชายแดน: 1px Solid #CCC; ความเป็นมา: #F6F6F6; -MOZ-Border-Radius: 10px; -webkit-Border-Radius: 10px; แนวชายแดน: 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') ไม่มีการทำซ้ำ -210px -0px; ขอบซ้าย: 100px; ระยะขอบด้านบน: 10px; ความกว้าง: 200px; ความสูง: 44px; เคอร์เซอร์: ย้าย; } .inputs {ตัวอักษร: ตัวหนา 15px Arial; ขอบซ้าย: 80px; ขอบด้านบน: 30px; } .inputs .Sign-Input {Padding-bottom: 20px; } .inputs. sign-input input {width: 170px; ชายแดน: 1px #CCC Solid; สี: #868686; ขนาดตัวอักษร: 16px; Padding: 2px; -MOZ-Border-Radius: 10px; -webkit-Border-Radius: 10px; -khtml-border-Radius: 10px; -border-Radius: 10px; -border-Radius: 10px; โครงร่าง: ไม่มี; } .btn {พื้นหลัง: url ("../ images/login_btn.png") ไม่มีการทำซ้ำ -111px 0; ความกว้าง: 111px; ความสูง: 36px; ชายแดน: 0; TEXT-ALIGN: CENTER; ความสูงของสาย: 20px; สี: #0C4E7C; เคอร์เซอร์: ตัวชี้; ขอบซ้าย: 14px; } .login-State-Trigger {เคอร์เซอร์: ตัวชี้; แสดง: บล็อก; ลอย: ซ้าย; ความสูง: 16px; ล้น: ซ่อน; ความกว้าง: 120px; มาร์จิ้น: 4px 0 0 0; } .login-state-trigger2 {margin: 10px 0 0 20px; } .login-state-down {พื้นหลัง: url ("../ images/ptlogin.png") ไม่มีการทำซ้ำการเลื่อน 0 -22px transparent; ลอย: ซ้าย; ความสูง: 6px; ระยะขอบด้านบน: 5px; ล้น: ซ่อน; Text -Indent: -999EM; ความกว้าง: 7px; } .login-state-show {float: ซ้าย; ความสูง: 14px; ล้น: ซ่อน; Text -Indent: -999EM; ความกว้าง: 14px; มาร์จิ้น: 1px 4px 0 0; } .login-state-txt {float: ซ้าย; ขอบซ้าย: 5px; ขนาดตัวอักษร: 12px; > ความสูงของสาย: 18px! สำคัญ; } .login-state .CallMe {พื้นหลัง: url ("../ images/ptlogin.png") -72px 0 ไม่ต้องทำซ้ำ; } .login-state .online {พื้นหลัง: url ("../ images/ptlogin.png") 0 0 ไม่ซ้ำ; } .login-state .Away {พื้นหลัง: url ("../ images/ptlogin.png") -18px 0 ไม่ซ้ำ; } .login-state .busy {พื้นหลัง: url ("../ images/ptlogin.png") -36px 0 ไม่ซ้ำ; } .login-state .Silent {พื้นหลัง: url ("../ images/ptlogin.png") -108px 0 ไม่ต้องทำซ้ำ; } .login-state .hidden {พื้นหลัง: url ("../ images/ptlogin.png") -54px 0 ไม่ซ้ำ; } .StatePanel {display: none; ตำแหน่ง: สัมบูรณ์; ขวา: 68px; ด้านบน: 193px; z-index: 10; มาร์จิ้น: 0; ความกว้างของชายแดน: 1px; สไตล์ชายแดน: ของแข็ง; สีชายแดน: #CCC #6A6A6A #666 #CDCDCD; Padding: 0; ความกว้าง: 100px; ความสูง: 133px; ล้น: ซ่อน; ความเป็นมา: สีขาว; ขนาดตัวอักษร: 12px; ความสูงของสาย: 1.5; } .StatePanel .StatePanel_li {display: block; ลอย: ซ้าย; มาร์จิ้น: 0; Padding: 3px 0; ความกว้าง: 100px; ความสูง: 16px; ความสูงของสาย: 16px; ล้น: ซ่อน; ซูม: 1; เคอร์เซอร์: ตัวชี้; } .StatesElect_icon {Float: ซ้าย; มาร์จิ้น: 2px 0 0 5px; ความกว้าง: 14px; ความสูง: 14px; ล้น: ซ่อน; } .StatesElect_text {มาร์จิ้น: 0 0 0 22px; } .BottomDiv {margin-left: 70px; } .ui_boxyclose {width: 28px; ความสูง: 28px; ตำแหน่ง: Absolute; Top: -10px; ขวา: -10px; เคอร์เซอร์: ตัวชี้; พื้นหลัง: url ('../images/boxy_btn.png') ไม่มีการทำซ้ำ; z-index: 1}. .ui_boxyclose {พื้นหลัง: 0; ตัวกรอง: progid: dximagetransform.microsoft.alphaimageLoader (src = 'boxy_btn.png', sizingMethod = 'scale')}3.js/drag.js:
ฟังก์ชั่น getByClass (clsname, parent) {var oparent = parent? document.getElementById (parent): เอกสาร, eles = [], elements = oparent.getElementsByTagname ('*'); สำหรับ (var i = 0, l = elements.length; i <l; i ++) {ถ้า (องค์ประกอบ [i] .classname == clsname) {eles.push (องค์ประกอบ [i]); }} return eles;} window.onload = drag; function drag () {var otitle = getByClass ('LOGIN_LOGO_WEBQQ', 'LOGINPANEL') [0]; // ลาก otitle.onmousedown = fndown; // ปิด 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') LoginStateshow = document.getElementById ('LoginStateshow'); loginState.onclick = ฟังก์ชั่น (e) {e = e || window.event; if (E.StopPropagation) {E.STOPPROPAGATION (); } else {e.cancelBubble = true; } statelist.style.display = 'block'; } // สำหรับ (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 = 'ไม่มี'; statetxt.innerhtml = getByClass ('stateelect_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 = document.getElementById ('loginPanel'), // เมื่อเคอร์เซอร์กดระยะห่างระหว่างเคอร์เซอร์และแผงควบคุมคือ disx = event.clientx-odrag.offsetleft, disy = event.clienty-odrag.offsettop; // ย้าย document.onmousemove = function (เหตุการณ์) {event = event || window.event; fnmove (เหตุการณ์, disx, disy); } // ปล่อย Mouse Document.onMouseUp = function () {document.onmousemove = null; document.onmouseup = null; }} ฟังก์ชั่น 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; } อื่นถ้า (l> maxw) {l = maxw; } if (t <0) {t = 10; } อื่นถ้า (t> maxh) {t = maxh; } odrag.style.left = l+'px'; odrag.style.top = t+'px';}4. ในที่สุดไฟล์รูปภาพที่ต้องการ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น