Bảng đăng nhập và hiệu ứng chuyển trang.

Fri Mar 16, 2012 12:58 am

Hôm nay mình muốn chia sẽ với mọi người cái khung đăng nhập của mình vừa mới làm tuy không đẹp lắm nhưng không xấu... Very Happy

.
Hiệu Ứng:

- Có thể tắt bằng nút tắt như của Window7 hay trình duyệt Google Chrome
- Ảnh mờ mờ ảo ảo đẹp
- Hiệu ứng giống 4D(kiểu mới Exclamation

)
- Hiển thị đẹp cho 4rum nền trắng...
- Đăng nhập chuyển trang hơn đẹp à nha...
- Chuyển trang giống nạp dữ liệu game lắm.

Demo:
Bảng đăng nhập và hiệu ứng chuyển trang. Untitled

Bảng đăng nhập và hiệu ứng chuyển trang. Untitled

Còn bây giờ là cách làm:
Bươc 1:
Tạo một trang HTML mới với code sau:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="vi" xml:lang="vi" > <head><title>OnlineWorld Forum's</title><meta http-equiv="content-type" content="text/html; charset=utf-8;" /><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/book.ico" /><meta name="language" content="vi" /><meta name="robots" content="index, follow, noodp" /><link rel="stylesheet" href="/64-ltr.css" type="text/css" /><script type="text/javascript"> function treatvar(nom) { var trouve= xhr.responseText.replace(RegExp("^.+<li style=\"margin-bottom:5px;direction:ltr;text-align:left;\"><strong>{"+nom+"}<\/strong> : (.*?) <span style='direction:ltr'>$.*?$<\/span><br \/><\/li>.+$"),'$1'); if(xhr.responseText==trouve) return; var children = document.getElementsByTagName('*') || document.all; var v= new Array(); var i = -1; while(++i < children.length) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == nom) { v.push(child); break; } } } i=-1; while(++i!=v.length) if(v[i].tagName=='INPUT'||v[i].tagName=='TEXTAREA')v[i].value+= trouve; else v[i].innerHTML+=trouve;}; if (window.ActiveXObject) { var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } if(xhr!=null) { xhr.onreadystatechange = function() { if(xhr.readyState == 4) { treatvar('FORUMURL'); treatvar('FORUMURLINK'); treatvar('FORUMNAME'); treatvar('FORUMNAMELINK'); treatvar('FORUMDESC');treatvar('FORUMBIRTHDAY'); treatvar('FORUMAGE'); treatvar('FORUMCOUNTFORUM'); treatvar('FORUMCOUNTOPIC'); treatvar('FORUMCOUNTPOST');treatvar('FORUMCOUNTUSER');treatvar('FORUMONLINEUSER'); treatvar('FORUMONLINEDATE'); treatvar('FORUMLASTUSER'); treatvar('FORUMLASTUSERLINK'); treatvar('USERNAME'); treatvar('USERLINK'); treatvar('USERBIRTHDAY'); treatvar('USERAGE'); treatvar('USERREGDATE'); treatvar('USERLASTVISIT'); treatvar('USERCOUNTPOST'); } }; xhr.open("GET","/popup_help.forum?l=miscvars", true); xhr.send(null); } </script></head><body background="http://i74.servimg.com/u/f74/15/44/78/93/bg1u1010.jpg" bgcolor="#e5e5e5" text="#000000" link="#006699" vlink="#5493b4"><a name="top"></a><br/><br/><table class="bodylinewidth" width="100%" cellspacing="0" cellpadding="0" border="0" align="center"><tr> <td><table style="width: 100%" cellpadding="0" cellspacing="0" dir="ltr"><tr> <td class="body_01"> <img src="http://2img.net/i/fa/empty.gif" alt="" width="9" height="39" /></td> <td style="width: 100%" class="headerbar"> <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse"> <tr align="center"> <td align="center" width="100%"> </td> </tr> </table> </td> <td class="body_03"> <img class="imgborder" src="http://2img.net/i/fa/empty.gif" width="9" height="39" alt="" /></td> </tr> </tr></table></td></tr><tr><td class="bodyline"> <div class="tren"> <div class="tren_trai"> <div class="tren_phai"> </div></div></div> <div class="doc_trai"> <div class="doc_phai"> <div class="doc_duoi"> <div style="padding-left:8px; padding-right:8px;"> <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center" style="border-bottom-width:0px"> <tr> <td class="catHead" width="100%"><p style="text-align: center; "> <span style="color:#ffffff;"><strong>Hệ Thống Kiểm Tra Tài Khoản Đang Khởi Động</strong></span></p> </td> </tr> </table> <head> <title>redirecting...</title> <meta http-equiv="refresh" content="3;/forum"> </head> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr> <td align="center" class="row1" > <strong><font color='#a0ea00' size='3' face='Comic Sans MS'> Welcome To OnlineWorld Forum's </font></strong><br/><center><img src='http://i64.servimg.com/u/f64/15/44/78/93/f5283c10.png' /></center><br/> <center> <p> <span style="font-family:courier new;"><span style="font-size:12px;"><strong>Chúc mừng bạn đã đăng nhập tài khoản thành công</strong></span></span></p> <p> <span style="font-size:12px;"><strong><span style="font-family:courier new;">Vui lòng chờ hệ thống nạp dữ liệu trong khoảng 3s...</span></strong></span></p> <p> <img src="http://i869.photobucket.com/albums/ab259/tuyetson_10/Skin%20hailang/loading11.gif" /></p> </center> <p class="center"> <input class="button button1" name="ok" type="submit" value="Ngừng Việc Nạp Dữ Liệu Và Thông Tin Vào Tài Khoản Sử Dụng" /> </p> </td> </tr> </table> </form> </div></div></div></div> <div class="duoi"> <div class="duoi_trai"> <div class="duoi_phai"> </div></div></div> </td></tr><tr><td><table style="width: 100%" cellpadding="0" cellspacing="0" dir="ltr"> <tr> <td class="body_06"><img class="imgborder" src="http://2img.net/i/fa/empty.gif" width="17" height="33" alt="" /></td> <td style="width: 100%" class="footerbar"><table align="center" border="0" cellpadding="0" cellspacing="0" class="tborder" style="background-color: rgb(238, 238, 238); color: rgb(43, 255, 0); font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 15px; " width="100%"> </table></td> <td class="body_08"> <img class="imgborder" src="http://2img.net/i/fa/empty.gif" width="17" height="33" alt="" /></td> </tr> </table> </td></tr></table> </body></html>

Bước 2:
Nếu muốn hiển thị chỉ ở trang thì chèn vào Index_Body còn nếu muốn hiển thị ở tất cả mọt chỗ thì chèn vào Oerall_Header:

Code:: <script> function hideLoginBoard(){document.getElementById('loginboard').style.display = 'none'; }</script> <div id="loginboard" style="z-index: 1000; filter: alpha(opacity=70); position: absolute; top: 250px; opacity: 0.70"> <table align="left" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; color: rgb(0, 0, 0); text-align: left; font-family: 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 13px; " width="60%"> <tbody style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <tr style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; "> <font class="Apple-style-span" face="'Times New Roman'" size="3"><img alt="" src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151017tcat_l10.jpg" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; " /></font></td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url(http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151016tcat_c10.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 0% 0%; background-repeat: repeat no-repeat; " width="100%"> <table align="left" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; " width="100%"> <tbody style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <tr style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <td align="left" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding-top: 12px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> <table align="left" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; " width="75%"> <tbody style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <tr style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; "> <font class="Apple-style-span" face="'Times New Roman'" size="3"><img alt="" src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151018tcat_t10.jpg" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; " /></font></td> <td class="tcat" style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-top: 3px !important; padding-right: 3px !important; padding-bottom: 3px !important; padding-left: 3px !important; border-bottom-width: 0px; border-bottom-color: initial; border-bottom-style: initial; font-style: italic; font: normal normal bold 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url(http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151018tcat_t11.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-left-width: 0px; border-left-style: initial; border-left-color: initial; border-right-width: 0px; border-right-style: initial; border-right-color: initial; text-align: center; background-position: 0% 0%; background-repeat: repeat no-repeat; " width="100%"> Khung Đăng Nhập</td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; " width="200"> <font class="Apple-style-span" face="'Times New Roman'" size="3"><img alt="" src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151019tcat_t12.jpg" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; " /></font></td> </tr> </tbody> </table> </td> <td align="right" style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; "> <div style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; float: right; "> <font face="'Times New Roman'" size="3"><a href="#Close" onclick="hideLoginBoard(); return false"><b><img src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151010open.png" /></b></a></font></div> </td> </tr> </tbody> </table> </td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; "> <font class="Apple-style-span" face="'Times New Roman'" size="3"><img alt="" src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151017tcat_r10.jpg" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; " /></font></td> </tr> <tr style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url(http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151011scale_10.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 0% 0%; background-repeat: no-repeat repeat; " valign="bottom"> </td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; " width="100%"> <fieldset class="fieldset"> <form action="/login.forum?redirect=/h22-page" method="post" name="form_login"> <table border="0" cellpadding="0" cellspacing="0" class="user_login_form forumline" width="100%"> <tbody> <tr> <td align="middle" class="row1" valign="top" width="100%"> <p> <span style="font-family:arial;"><strong><span class="genmed">Tài Khoản:</span><input class="post" name="username" size="15" type="text" /></strong></span></p> <p> <span style="font-family:courier new;"><strong><span style="font-family:arial;"><span class="genmed"> Mật khẩu:</span></span><input class="post" name="password" size="15" type="password" /></strong></span><br /> <br /> <input class="mainoption" name="login" type="submit" value="Đăng Nhập" /><br /> <span style="font-family:courier new;"><span style="font-size:12px;"><strong><span class="gensmall">Đăng nhập tự động mỗi khi truy cập</span></strong></span></span><input checked="checked" class="radio" name="&" type="checkbox" /></p> </td> </tr> </tbody> </table> </form> </fieldset> </td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url(http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151012scale_11.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 100% 0%; background-repeat: no-repeat repeat; " valign="bottom"> </td> </tr> <tr style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; "> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; "> <font class="Apple-style-span" face="'Times New Roman'" size="3"><img alt="" src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151005footer10.jpg" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; " /></font></td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; background-image: url(http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151006footer11.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 0% 0%; background-repeat: repeat no-repeat; " width="100%"> </td> <td style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font: normal normal normal 10pt/normal 'Segoe UI', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; "> <font class="Apple-style-span" face="'Times New Roman'" size="3"><img alt="" src="http://images.dailyinfo.vn/archive/photo/fashion/201008/20100801/01151006footer12.jpg" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; " /></font></td> </tr> </tbody> </table>  <br /> </div> <script> var curx=350; var cury=0; </script><script> var curx=350; var cury=0; </script><script> var ie45,ns6,ns4,dom; if (navigator.appName=="Windows Internet Explorer") ie45=parseInt(navigator.appVersion)>=4; else if (navigator.appName=="Netscape"){ ns6=parseInt(navigator.appVersion)>=5; ns4=parseInt(navigator.appVersion)<5;} dom=ie45 || ns6; var timershow=false; var win_w=window.innerWidth ? window.innerWidth : document.body.offsetWidth; var mid_w=win_w/2; var timershow1=window.setInterval("stayMiddle()",1); function getobj(id) { el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id]; return el; } function moveobj(obj,x,y) { obj.style.left=x + "px"; obj.style.top=y+ "px"; curx=x; cury=y; } function stayMiddle() { if (document.documentElement && document.documentElement.scrollTop) var pY = document.documentElement.scrollTop; else if (document.body) var pY = document.body.scrollTop; obj = getobj('loginboard'); newy = cury+((pY-cury)/16)+5; moveobj(obj,curx,newy); } </script> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=384"></script></form>

Tìm cái "/h22-page" là thay bằng link trang HTML vừa làm ở bước 1
Xong thì xem thành quả của mình đi nào... ~^o^~
Ver 2 mình sẽ làm cái chuyển trang cũng là Windows7 lum và sẽ đẹp hơn nữa... :X

Nguồn: Chinhphuc.info