Я использую 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" /> <script src="js/drag.js"></script></head><body> <div id = "loginpanel"> <div style = "позиция: относительно; z-index: 1;"> <div Id = "ui_boxyclose"> </div> </div> <div> <div> <div> <pan> upplose: </span> <pan> <intocompletee = "on" name = "u" u "u" value = "QQ номер или учетная запись электронной почты" onfocus = "if (value == 'QQ номер или учетная запись электронной почты') {value = ''}" onblur = "if (value == '') {value = 'QQ Number или Account';}"/> </span> </div> <div> <pan> password: </span> <span> <in name = "p" Id = "hId =" hId = "". tabIndex = "2"/> </span> </div> </div> <div> <div style = "float: left"> </div> <div> <div Id = "loginstate"> <div id = "loginstateshow"> status </div> <div> <div> </div> <div> <div id = " id = "LoginStatePanel" style = "Display: none"> <li id = "онлайн"> <div> </div> <div> я онлайн </div> </li> <li id = "callme"> <div> </div> <div> q me </div> </li> <li id = "aill"> <div> </div> <div> </div> </li> <li id = "hailt" <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> </body> </html>2.css/main.css:
.loginPanel {ширина: 380px; Высота: 247px; Слева: 400px; Верх: 120px; позиция: абсолютно; Граница: 1PX SOLID #CCC; Фон: #f6f6f6; -Моз-грамотный радий: 10px; -Вебкит-грамотный радий: 10px; граница радий: 10px; -Моз-бокс-тень: 0 0 8px #000; -Webkit-box-shadow: 0 0 8px #000; Box-Shadow: 0 0 8px #000; } .login_logo_webqq {founale: url ('../ Image/login_window_logo.png') без повторного перепора -210px -0px; Полевая левая: 100px; маржинальная версия: 10px; Ширина: 200px; Высота: 44px; курсор: двигаться; } .Inputs {font: Bold 15px arial; Полевая левая: 80px; маржинальная версия: 30px; } .Inputs .sign-input {padding-bottom: 20px; } .INPUTS. Входной вход {ширина: 170px; Граница: 1px #ccc твердый; Цвет: #868686; размер шрифта: 16px; Заполнение: 2px; -Моз-грамотный радий: 10px; -Вебкит-грамотный радий: 10px; -Khtml-border-radius: 10px; -Сордер-радий: 10px; -Сордер-радий: 10px; Схема: нет; } .btn {founale: url ("../ Images/login_btn.png") без повторного перепора -111px 0; Ширина: 111px; Высота: 36px; граница: 0; Текст-альбом: Центр; высота линии: 20px; Цвет: #0C4E7C; курсор: указатель; Полевая левая: 14px; } .login-State-Trigger {cursor: pointer; дисплей: блок; Плавание: осталось; Высота: 16px; переполнение: скрыто; Ширина: 120px; Полевая: 4px 0 0 0; } .login-State-trigger2 {margin: 10px 0 0 20px; }. Плавание: осталось; Высота: 6px; маржинальная версия: 5px; переполнение: скрыто; текстовый: -999EM; Ширина: 7px; } .login-State-Show {float: Left; Высота: 14px; переполнение: скрыто; текстовый: -999EM; Ширина: 14px; Полевая: 1px 4px 0 0; } .login-State-txt {float: left; Полевая левая: 5px; размер шрифта: 12px; >-высота: 18px! Важно; / }. }. }. } .login-State .silent {founal: url ("../ Images/ptlogin.png") -108px 0 no-repeat; }. } .StatePanel {Display: None; позиция: абсолютно; Справа: 68px; Верх: 193px; z-index: 10; поля: 0; ширина границы: 1PX; пограничный стиль: твердый; Пограничный цвет: #CCC #6A6A6A #666 #CDCDCD; Заполнение: 0; Ширина: 100px; Высота: 133px; переполнение: скрыто; Фон: белый; размер шрифта: 12px; высота линии: 1,5; } .statePanel .statePanel_li {display: block; Плавание: осталось; поля: 0; Заполнение: 3px 0; Ширина: 100px; Высота: 16px; высота линии: 16px; переполнение: скрыто; Увеличение: 1; курсор: указатель; } .stateselect_icon {float: Left; Полевая: 2px 0 0 5px; Ширина: 14px; Высота: 14px; переполнение: скрыто; } .stateselect_text {margin: 0 0 0 22px; } .bottomdiv {margin-left: 70px; }. .ui_boxyclose {founale: 0; filter: progid: dximageTransform.microsoft.alphaimageLoader (src = 'boxy_btn.png', sizingmethod = 'scale')}}}}}}}}}}}}}3.js/drag.js:
Функция getByClass (clSname, parent) {var oparent = parent? Document.getElementById (родитель): документ, 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 = Drag; function Drag () {var otitle = getByClass ('login_logo_webq', 'loginPanel') [0]; // перетаскивать otitle.onmousedown = fndown; // закрыть var oclose = document.getElementById ('ui_boxyclose'); oclose.onclick = function () {document.getElementById ('loginPanel'). style.display = 'none'; } // Состояние переключения var loginstate = document.getElementById ('LoginState'), Statetist = document.getElementById ('LoginStatePanel'), LIS = stateList.getElementsBytagname ('li'), statetxt = document.getElement ('login2qq_stte_txt'), statetxt = document.getelement 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'; } // 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 = 'none'; statEtxt.innerhtml = getbyclass ('stastelect_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; // Перемещение Document.onmouseMove = function (event) {event = event || window.event; fnmove (Event, Disx, Disy); } // Выпустить 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. Наконец, необходимые файлы изображений
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.