Admin giới thiệu cho AE một giao diện hót . Sin giới thiệu: khi bạn di chuyển mỗi mục thì nhạc midi sẽ thay đổi theo từng mục . Ngoài ra hình nền sẽ thay đổi theo time
Tải về máy
chia sẻ trang này
Link:http://kinhnghiem.uiwap.com <style type="text/css"> #xt_auth_container { position: static; display: inline; display: inline-block; text-align: right; margin: 3px 0; padding: 0; width: 100%; height: auto; border: none; } .xt_auth_view { position: static; display: inline; display: inline-block; text-align: right; margin: 0; padding: 0; width: auto; height auto; border: none; } .xt_auth_action { text-align: left; position: static; display: inline; zoom: 1; display: inline-block; vertical-align: top; margin: 0 5px 0 0; padding: 0 5px; height: 20px; width: auto; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background-color: #2e2e2e; background-color: rgba(0,0,0,0.4); !background-color: #2e2e2e; font: 600 12px/20px "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif; text-decoration: none; -webkit-text-shadow: 1px 1px 0 rgba(0,0,0,0.08); -moz-text-shadow: 1px 1px 0 rgba(0,0,0,0.08); -o-text-shadow: 1px 1px 0 rgba(0,0,0,0.08); text-shadow: 1px 1px 0 rgba(0,0,0,0.08); color: #fff; -webkit-user-select: none; } .xt_auth_action > * { vertical-align: top; } .xt_auth_action:hover { background-color: #1f1f1f; background-color: rgba(0,0,0,0.6); } .xt_auth_action:link, .xt_auth_action:visited, .xt_auth_action:active, .xt_auth_action:hover { text-decoration: none; color: #fff; } .xt_auth_icon, .xt_auth_avatar { position: static; display: inline; display: inline-block; width: 13px; height: 13px; margin: 3px 1px 0 0; padding: 0; vertical-align: top; border: 0; } .xt_auth_icon { background-image: url(http://xtgem.com/images/authbar/auth_sprite_v2.png); margin-right: 0; } .xt_auth_icon_enchanted .xt_auth_icon { background-size: 103px; /* margin: 4px 2px 0 0; */ } /* join & subscribe */ .xt_auth_join .xt_auth_icon, .xt_auth_subscribe .xt_auth_icon { background-position: -92px 13px; } /* inbox */ .xt_auth_inbox .xt_auth_icon { background-position: -78px 13px; } /* rate */ .xt_auth_rate .xt_auth_icon { background-position: 0 14px; } /* unrate */ .xt_auth_unrate .xt_auth_icon { background-position: -13px 14px; } /* star */ .xt_auth_star .xt_auth_icon { background-position: -26px 13px; } /* unstar */ .xt_auth_unstar .xt_auth_icon { background-position: -39px 13px; } /* repost */ .xt_auth_repost .xt_auth_icon { background-position: -52px 12px; margin-top: 4px; } /* reposted */ .xt_auth_reposted .xt_auth_icon { background-position: -65px 12px; margin-top: 4px; } /* join & subscribe */ .xt_auth_icon_enchanted .xt_auth_join .xt_auth_icon, .xt_auth_icon_enchanted .xt_auth_subscribe .xt_auth_icon { background-position: 11px 0.5px; width: 12px; } /* inbox */ .xt_auth_icon_enchanted .xt_auth_inbox .xt_auth_icon { background-position: 25px 1px; } /* rate */ .xt_auth_icon_enchanted .xt_auth_rate .xt_auth_icon { background-position: 0 0; } /* unrate */ .xt_auth_icon_enchanted .xt_auth_unrate .xt_auth_icon { background-position: -13px 0; } /* star */ .xt_auth_icon_enchanted .xt_auth_star .xt_auth_icon { background-position: 77px 0; } /* unstar */ .xt_auth_icon_enchanted .xt_auth_unstar .xt_auth_icon { background-position: 64px 0; } /* repost */ .xt_auth_icon_enchanted .xt_auth_repost .xt_auth_icon { background-position: 51px 1px; margin: 3px 0 0 0; } /* reposted */ .xt_auth_icon_enchanted .xt_auth_reposted .xt_auth_icon { background-position: 39px 1px; margin: 3px 0 0 0; } /* hidding */ .xt_auth_unstar, .xt_auth_unsubscribe, .xt_auth_unrate { display: none; } .xt_auth_action_star_active .xt_auth_unstar, .xt_auth_action_rate_active .xt_auth_unrate, .xt_auth_action_subscribe_active .xt_auth_unsubscribe { display: inline-block; } .xt_auth_action_star_active .xt_auth_star, .xt_auth_action_rate_active .xt_auth_rate, .xt_auth_action_subscribe_active .xt_auth_subscribe { display: none; } #xt_auth_container { position: fixed; } html { padding-top: 20px; } #xt_auth_container { top: 0; left: 0; } #xt_auth_container, .xt_auth_view, .xt_auth_icon, .xt_auth_avatar { max-height: none !important; max-width: none !important; min-width: none !important; min-width: none !important; opacity: 1 !important; text-indent: 0 !important; visibility:visible !important; } </style><div id='xt_auth_container'><div class='xt_auth_view xt_auth_not_logged'><a href='https://xtgem.com/auth/login?redir=VjFkaGJIUXpjekJUZWpsQ1IyeHBURWRoT1ZKR01FdFVSakJoVjB4TFIzVlhTbFZ5&s=VjFkVmJuVkpWVVpHVlV0YVNrWnBRMGw2VDFGSFZHMVVSMVJwVWc9PQ%3D%3D&is_a=0&is_f=0&via=New+authbar' target='_parent' class='xt_auth_action xt_auth_login'>Log in</a></div></div> <script type="text/javascript"> (function () { var doc = document; var body = doc.body; var xhr_done_auth = true; doc.addEventListener ? window.addEventListener( 'load', init, false ) : window.attachEvent( 'onload', init ); function init () { doc = document; body = doc.body; var el_auth = doc.getElementById( 'xt_auth_container' ); doc.addEventListener ? el_auth.addEventListener( 'click', hook_xhr_action, false ) : el_auth.attachEvent( 'onclick', hook_xhr_action ); if ( 'backgroundSize' in doc.body.style ) { if ( window.devicePixelRatio && window.devicePixelRatio > 1 ) { el_auth.className += ' xt_auth_icon_enchanted'; } } } // bind xhr links function hook_xhr_action ( e ) { var e = e || window.event; var target = e.target || e.srcElement; target = target.className == 'xt_auth_icon' ? target.parentNode : target; if ( target.getAttribute( 'data-xhr' ) ) { var url = target.href; url = url + (url.indexOf( '?' ) == -1 ? '?via_ajax=1' : '&via_ajax=1'); load_data({ url: url, xhr_done: xhr_done_auth, callback: handle_xhr_response }); (e.preventDefault) ? e.preventDefault() : e.returnValue = false; return false; } } function handle_xhr_response ( xhr ) { function handle_error ( xhr ) { window.location.href = window.location.href; } function handle_success ( xhr ) { var wrapper = document.getElementById( 'xt_auth_container' ); var tmp_class = wrapper.className; var current_action = xhr.response.split( ';' )[1]; var actions = { bookmark: 'xt_auth_action_star_active', vote: 'xt_auth_action_rate_active', subscribe: 'xt_auth_action_subscribe_active' }; for ( key in actions ) { if ( !actions.hasOwnProperty( key ) ) continue; if ( current_action.indexOf( key ) == -1 ) continue; wrapper.className = current_action.indexOf( 'un' ) == -1 ? tmp_class + ' ' + actions[key] : tmp_class.replace( (' ' + actions[key]), '' ); } } xhr.response = xhr.response ? xhr.response : xhr.responseText; (xhr.status != 200 || xhr.response.indexOf( 'ERR;') != -1 ) ? handle_error(xhr) : handle_success(xhr); } //load_data( { url: url, method: method, data: data, async: async, xhr_done: xhr_done, callback: callback }); function load_data( settings ) { var async = settings.async ? !!settings.async : true, url = settings.url ? settings.url.toString() : false, method = settings.method ? settings.method.toUpperCase() : 'GET', callback = settings.callback ? settings.callback : false, data = settings.data ? settings.data.toString() : '', xhr_done = settings.xhr_done ? settings.xhr_done : null, xhr; // xhr in progress or url not provided -> exit if ( !( (xhr_done == true || xhr_done == null) && url ) ) return; if ( typeof XMLHttpRequest !== 'undefined' ) { xhr = new XMLHttpRequest(); } else { try { xhr = new XMLHttpRequest("MSXML2.XmlHttp.5.0") || new XMLHttpRequest("MSXML2.XmlHttp.4.0") || new XMLHttpRequest("MSXML2.XmlHttp.3.0") || new XMLHttpRequest("MSXML2.XmlHttp.2.0") || new XMLHttpRequest("Microsoft.XmlHttp"); } catch ( e ) {} } // if xhr object does not supported or url not given, exit xhr.onreadystatechange = function () { if ( xhr.readyState != 4 ) return; if ( xhr_done != null ) xhr_done = true; callback ? callback( xhr ) : null; } xhr.open( method, url, async ); if ( method === 'POST' ) { xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" ); xhr.send( data ); } else { xhr.send( null ); } if ( xhr_done != null ) xhr_done = false; }; })(); </script></body> </html>