使用方法

html结构如下:

<h1><a href="//bns.qq.com" target="_blank" class="logo ti pa spr" id="logo" title="点击打开剑灵官方网站">剑灵官方网站</a></h1> <div class="topbar spr" id="topbar"> <ul class="topnav"> <li class="spr lborder"><a target="_blank" href=//bns.qq.com">进入官网</a></li> <li class="spr"><a target="_blank" href="//lz.bns.qq.com">灵值中心</a></li> <li class="rborder c1">微信号:<em class="wechat">LOVEBNS</em></li> </ul> <div class="login" id="unlogin"> <a class="login-btn pr spr" href="javascript:;" id="dologin">登录<span class="icon-user spr pa"></span></a> </div> <div class="login" id="logined" style="display:none;"> <a class="login-btn logout pr spr" href="javascript:;" id="dologout">注销<span class="icon-out spr pa"></span></a> <p class="login-text pr"> <span class="icon-user spr pa"></span><span id="login_qq_span">925436853</span>,欢迎您! <!-- 如果有绑定大区、获奖记录则要添加下面的dom结构,没有的话直接删掉 --> <span id="spanNotBind"><a href="#">绑定大区</a></span> <span id="spanBinded" style="display:none"> <span id="areaInfo">烈沙地带(与铁傀王互通) 葡萄籽</span> <span id="roleInfo">xx角色名字</span> <a href="#">更改绑定</a> </span> <span id="spanRecord"><a href="javascript:void(0);">获奖记录</a></span> <!-- 绑定大区、获奖记录end --> </p> </div> </div>

css如下:

/*reset*/ body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0} body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif} h1,h2,h3,h4,h5,h6{font-size:100%} em,b{font-style:normal} .yh{font-family:"\5fae\8f6f\96c5\9ed1",arial,"\5b8b\4f53"} a{text-decoration:none} a:hover{text-decoration:none} img{border:0; vertical-align:top;} td,th,ul,ol{padding:0} ul,li{list-style:none; } .clearfix:after { display:block; visibility:hidden; height:0; content:'.'; clear:both; } .clearfix { zoom:1; } .hide{display:none;} /* topbar */ .pr{position:relative;} .pa{position:absolute;} .ti{text-indent:-999em;} .hid{display:none;} .spr{background:url(//ossweb-img.qq.com/images/bns/act/a20131030repair/spr24.png) no-repeat;} .logo{height:104px;width:150px;top:42px;left:0;z-index:10;} .topbar{width:100%;height:48px;background-repeat:repeat-x;background-position:0 -104px;overflow:hidden;} .topnav{float:left;height:30px;padding:10px 0 0 130px;} .topnav li{float:left;height:30px;padding:0 10px;line-height:27px;background-position:-82px -154px; color:#FFF;} .topnav a{display:inline-block;zoom:1;} .topnav .wechat{font-family:'宋体',tahoma;font-size:12px;color:#fff;} .login{float:right;padding:8px 25px 0 0;} .login-btn{float:right;background-position:0 -218px;width:92px;height:32px;padding-right:15px;line-height:30px;text-align:center;} .logout{background-position:0 -218px;width:87px;padding-right:20px;} .login-text{float:right;color:#fff;font-family:'宋体',tahoma;font-size:12px;padding:8px 10px 0 14px;} .icon-user{background-position:0 -154px;width:9px;height:13px;overflow:hidden;left:70px;top:9px;} .login-text .icon-user{left:0;top:9px;} .icon-out{background-position:-10px -159px;width:11px;height:8px;overflow:hidden;left:60px;top:11px;} .topnav li.rborder,.topnav li.rborder .wechat{ color:#5b834e;} .topnav li a{ color:#fff;} .login a{ color:#5b834e;}

js如下:

<script src="//ossweb-img.qq.com/images/js/milo/milo.js"></script> <script> // 登录 milo.addEvent(g("dologin"), "click", function() { need("biz.login-min",function(LoginManager){ LoginManager.init({ needReloadPage:true }); LoginManager.login(); }); return false; }); milo.addEvent(g("dologout"), "click", function() { need("biz.login-min",function(LoginManager){ LoginManager.logout(); }); return false; }); milo.ready(function() { need("biz.login-min",function(LoginManager){ LoginManager.checkLogin(function(){ g("login_qq_span").innerHTML = LoginManager.getUserUin();//获取QQ号 }); }); }); </script>