私は10年近くTencent QQを使用しています。今日、私はTencent QQのログインパネルを模倣して、ログインパネルのWebバージョンを作成しようとしています。次に、いくつかのコードを参照し、自分でコードを模倣し、書くことを学びます。
効果は次のとおりです。
また、パネルをドラッグしてステータスを選択する効果も実現します
これが特定のコードです：
1.index.html
<！Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> drag </title> <link href = "css/main.css" rel = "styleheet"/> id = "loginpanel"> <div style = "position：reative; z-index：1;"> <div id = "ui_boxyclose"> </div> </div> <div> <div> <div> <span>アカウント：</span> <span> <input autocomplete = "on" name = "u" id = "u" type = "" ime-mode = "" "1" "" "番号または電子メールアカウント "onfocus =" if（value == 'qq番号または電子メールアカウント'）{value = ''} "onblur =" if（value == ''）{value = 'number' ';} "/> </span> </div> <div> <span>パスワード：</スパン> <スパン> <16 = tabindex = "2"/> </span> </div> </div> <div> <div> <div> div style = "float：left"> </div> <div> <div id = "loginstatehow "> status </div> <div> <div> div> <div> <div =" login2q_state_txt_txt "> </ulgr id = "loginstatepanel" style = "display：none"> <li id = "online"> <div> </div> <div>私はオンライン</div> </li> <li id = "callme"> <div> </div> <div> <div> </div> <div> busy </div> </li> <li id = "silent"> <div> </div> <div> dodurter </div> </li> <li id = "hidden"> <div> </div> <div> divisible </div> </div> </div> </div> </div> </div> </div> </body> </html>2.CSS/Main.CSS：
.loginpanel {width：380px;高さ：247px;左：400px;トップ：120px;位置：絶対;ボーダー：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（ '../ mages/login_window_logo.png'）no -repeat -210px -0px;マージン左：100px;マージントップ：10px;幅：200px;高さ：44px;カーソル：移動; } .inputs {font：bold 15px arial;マージン左：80px;マージントップ：30px; } .inputs .sign-input {padding-bottom：20px; } .inputs .sign-input input {width：170px;ボーダー：1px #ccc solid;色：＃868686;フォントサイズ：16px;パディング：2px; -moz-border-radius：10px; -webkit-border-radius：10px; -khtml-border-radius：10px; -border-radius：10px; -border-radius：10px;アウトライン：なし; } .btn {background：url（ "../ images/login_btn.png"）no -repeat -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; } .login-state-down {background：url（ "../ images/ptlogin.png"）無修正スクロール0 -22px透明;フロート：左;高さ：6px;マージントップ：5px;オーバーフロー：隠し;テキストインデント：-999EM;幅：7px; } .login-state-show {float：left;高さ：14px;オーバーフロー：隠し;テキストインデント：-999EM;幅：14px;マージン：1px 4px 0 0; } .login-state-txt {float：left;マージン左：5px;フォントサイズ：12px; > line-height：18px！重要; } .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 {display：none;位置：絶対;右：68px; TOP：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 {マージン：0 0 0 22px; } .bottomdiv {margin-left：70px; } .ui_boxyclose {width：28px; height：28px; position：aspolute; top：-10px; right：-10px; cursor：pointer; background：url（ '../ images/boxy_btn.png'）no-repeat; z-dex：1} .ie6_0 .ui_boxyclose {background：0; filter：progid：dmimagetransform.microsoft.alphaimageloader（src = 'boxy_btn.png'、sizingmethod = '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 = elemention.length; i <l; i ++）{if（elemention [i] .classname == clsname）{eles.push（elemention [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'）、statetxt = document.getelementbyid（ 'login2q_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'; } // 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（ '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'）、//カーソルがカーソルとパネルの間の距離を押すと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をもっとサポートすることを願っています。