读书人

请教上 百度知道 登陆效果如何做的

发布时间: 2012-09-16 17:33:16 作者: rapoo

请问下 百度知道 登陆效果怎么做的
最近想做一个登陆的功能,像百度知道一样,
就是我在网页 A 未登陆状态下,点击登陆会弹出一个两个层,一个div屏蔽整个屏幕,例外一个div显示登陆表单,
但是登陆成功后如何再刷新我先前的网页,显示用户信息,是刷新了整个网页A,还是刷新了嵌套在A头部的网页。
JavaScript可不可以对网页局部内容刷新,docement.write可以刷新整个网页,
可否给个示例源码 ,,谢谢

[解决办法]
把下面这段代码放在地址栏上试试?

JScript code
javascript:document.all[140].innerHTML="<b>噫,我的问题去哪啦?</b>";void(0);
[解决办法]
就是当前页面多了一层
[解决办法]
1 局部刷新
2 是Ajax
3 看你是用ajax 框架还是直接用Ajax 原理是一样的饿
[解决办法]
研究下这个吧:
JavaScript 仿LightBox内容显示效果
http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
[解决办法]
HTML code
<html><head><style type="text/css">#divh { z-index:10001; top:30%; left:45%; width:320px; background-color:#ffffff; border:solid 1px #555; }.tit { background-color:#f0f0f0; border-bottom:solid 1px #555; padding:8px;}.bod { padding:20px;}.bot {background-color:#f0f0f0; border-top:solid 1px #555; text-align:right; padding:4px;}</style></head><body><p>正文 </p><p>正文 </p><p> <a href="javascript:login();">登录</a> </p><p>正文 </p><p>正文 </p><p>正文 </p><div id="divh" style="position: absolute; display: none;"><div class="tit">用户登录</div><div class="bod"> 用户名:<input type="text" style="width:240px" /><br />密 码:<input type="text" style="width:240px" /> </div><div class="bot"> <input type="button" value="登录" onclick="cancelShide()" /> </div></div></body><script type="text/javascript">function login(){    shideBody();}var shield;function shideBody(){    shield = document.createElement("DIV");    shield.id = "shield";    shield.style.position = "absolute";    shield.style.left = "0px";    shield.style.top = "0px";    shield.style.width = "100%";    shield.style.height = document.documentElement.scrollHeight+"px";    shield.style.background = "#333333";    shield.style.textAlign = "center";    shield.style.zIndex = "10000";    shield.style.filter = "alpha(opacity=0)";    shield.style.opacity = 0;    document.body.appendChild(shield);       this.setOpacity = function(obj,opacity){    if(opacity>=1)opacity=opacity/100;    try{ obj.style.opacity=opacity; }catch(e){}    try{        if(obj.filters.length>0 && obj.filters("alpha")){            obj.filters("alpha").opacity=opacity*150;        }else{            obj.style.filter="alpha(opacity=\""+(opacity*150)+"\")";        }    }catch(e){}    }    var c = 0;    this.doAlpha = function(){    if (++c > 20){clearInterval(ad);return 0;}    setOpacity(shield,c);    }    var ad = setInterval("doAlpha()",1);    document.getElementById("divh").style.display = "";    document.getElementById("divh").style.marginLeft = "-200px";    document.getElementById("divh").style.marginTop = -75+document.documentElement.scrollTop + "px";}function cancelShide(){    if(document.getElementById("divh"))    {        document.getElementById("divh").innerHTML = "";        document.getElementById("divh").style.display = "none";    }    if(shield)    {        document.body.removeChild(shield);    }}</script></html> 

读书人网 >JavaScript

热点推荐