لقد كنت أستخدم Tencent QQ منذ ما يقرب من عشر سنوات. اليوم ، كنت أحاول تقليد لوحة تسجيل الدخول الخاصة بـ Tencent QQ لإنشاء إصدار ويب من لوحة تسجيل الدخول. ثم أشير إلى بعض التعليمات البرمجية ، وأقلدها بنفسي ، وأتعلم كتابة واحدة.
الآثار هي كما يلي:
كما يدرك تأثير سحب اللوحة واختيار الحالة
هنا هو الرمز المحدد:
1.index.html
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> drag </title> <link href = "css/main.css" rel = "stylesheet <div id = "loginpanel"> <div style = "الموضع: النسبية ؛ z-index: 1 ؛ value = "qq number أو حساب البريد الإلكتروني" onfocus = "if (value == 'qq jote أو حساب البريد الإلكتروني') {value = ''}" onblur = "if (value == '') {value = 'qq number أو elemct account' ؛}"/> </span> </span> </div> <span> tabindex = "2"/> </span> </viv> </viv> <viv> <div style = "float: left"> </viv> <div> <div id = "loginState"> <div id = "loginStateShow"> الحالة </div> <viv> تحت </div> <div> id = "loginStatePanel" style = "display: none"> <li id = "online"> <viv> </viv> <div> أنا عبر الإنترنت </div> </li> <li id = "callme"> <viv> </iv> <div> q me </iv> </li> <viv> </viv> <viv> مشغول </div> </li> <li id = "silent"> <viv> </viv> <div> لا تزعج </div> </li> <li id = "hidden"> <viv> </viv> غير مرئي </div> </li> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </body> </html>2.css/main.css:
.loginpanel {width: 380px ؛ الارتفاع: 247 بكسل ؛ اليسار: 400 بكسل ؛ أعلى: 120 بكسل ؛ الموقف: مطلق ؛ الحدود: 1px الصلبة #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 {background: url ('../ images/login_window_logo.png') no -repeat -210px -0px ؛ الهامش اليساري: 100px ؛ الهامش: 10 بكسل ؛ العرض: 200 بكسل ؛ الارتفاع: 44 بكسل ؛ المؤشر: تحرك. } .inputs {font: Bold 15px arial ؛ الهامش اليساري: 80 بكسل ؛ الهامش: 30 بكسل ؛ . . الحدود: 1px #ccc الصلبة ؛ اللون: #868686 ؛ حجم الخط: 16 بكسل ؛ الحشو: 2px ؛ -moz-border-Radius: 10px ؛ -webkit-border-Radius: 10px ؛ -KHTML-Border-Radius: 10px ؛ -border-Radius: 10px ؛ -border-Radius: 10px ؛ الخطوط العريضة: لا شيء ؛ . العرض: 111 بكسل ؛ الارتفاع: 36 بكسل ؛ الحدود: 0 ؛ محاذاة النص: المركز ؛ رفع الخط: 20 بكسل ؛ اللون: #0C4E7C ؛ المؤشر: مؤشر. الهامش اليساري: 14px ؛ } .login-State-trigger {cursor: pointer ؛ العرض: كتلة ؛ تعويم: اليسار. الارتفاع: 16 بكسل ؛ الفائض: مخفي. العرض: 120 بكسل ؛ الهامش: 4px 0 0 0 ؛ } .login-State-trigger2 {margin: 10px 0 0 20px ؛ . تعويم: اليسار. الارتفاع: 6px ؛ الهامش: 5 بكسل ؛ الفائض: مخفي. استولى النص: -999EM ؛ العرض: 7px ؛ } .login-State-Show {Float: Left ؛ الارتفاع: 14px ؛ الفائض: مخفي. استولى النص: -999EM ؛ العرض: 14px ؛ الهامش: 1px 4px 0 0 ؛ } .login-State-txt {float: left ؛ الهامش اليساري: 5px ؛ حجم الخط: 12 بكسل ؛ > رفع الخط: 18px! مهم ؛ . . . . . . } .statepanel {display: none ؛ الموقف: مطلق ؛ اليمين: 68 بكسل ؛ أعلى: 193 بكسل ؛ Z-Index: 10 ؛ الهامش: 0 ؛ عرض الحدود: 1 بكسل ؛ على غرار الحدود: صلبة. اللون الحدود: #CCC #6A6A6A #666 #CDCDCD ؛ الحشو: 0 ؛ العرض: 100px ؛ الارتفاع: 133 بكسل ؛ الفائض: مخفي. الخلفية: أبيض. حجم الخط: 12 بكسل ؛ ارتفاع الخط: 1.5 ؛ } .statepanel .statepanel_li {display: block ؛ تعويم: اليسار. الهامش: 0 ؛ الحشو: 3px 0 ؛ العرض: 100px ؛ الارتفاع: 16 بكسل ؛ ارتفاع الخط: 16 بكسل ؛ الفائض: مخفي. التكبير: 1 ؛ المؤشر: مؤشر. } .stateselect_icon {float: left ؛ الهامش: 2px 0 0 5px ؛ العرض: 14px ؛ الارتفاع: 14px ؛ الفائض: مخفي. } .stateselect_text {margin: 0 0 0 22px ؛ } .bottomdiv {margin-left: 70px ؛ } .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyclose {background: 0 ؛ filter: progid: dimizageTransform.microsoft.alphaimageLoader (src = 'boxy_btn.png' ، sizingmethod = 'scale')}3.JS/Drag.js:
وظيفة getByClass (clsname ، الأصل) {var oparent = parent؟ document.getElementById (parent): document ، eles = [] ، elements = oparent.getElementSbyTagName ('*') ؛ لـ (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] ؛ // drag otitle.onmousedown = fndown ؛ // إغلاق var oclose = document.getElementById ('ui_boxyclose') ؛ oclose.onclick = function () {document.getElementById ('loginpanel'). style.display = 'none' ؛ }. loginStatesHow = document.getElementById ('loginStatesHow') ؛ loginState.onclick = function (e) {e = e || window.event ؛ if (e.StopPropagation) { } آخر {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.cancelBubble = true ؛ } var id = this.id ؛ statelist.style.display = 'none' ؛ STATETXT.INNERHTML = GETBYCLASS ('ITEMTYELCT_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') ، // عندما يضغط المؤشر على المسافة بين المؤشر واللوحة disx = event.clientx-odrag.offsetleft ، disy = event.clienty-Odrag.offsettop ؛ // move document.onmousemove = function (event) {event = event || window.event ؛ fnmove (الحدث ، ديكس ، disy) ؛ } // refer the 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 = 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 أكثر.