程序说明 |
- 程序特点
- 当鼠标移过时只能分析是否在加载,当加载时移动事件失效。防止用户还没有看完加载的数据而转页。
- 增加了点击事件,当用户确定本页内容无可用信息时,点击程序不判读是否自动加载而直接转页,也可点击[x]关闭Loading。
- 支持多浏览器:IE7,IE6,IE5.5,IE5,FireFox2.0,Safari3.05,Opera(因本人美工有限Safari,Opera显示不是很理想,不过程序没有问题)
- 运行原理
- 通过_Load(_L)以兼容的方式加载主函数_L()
- 主函数_L()用_G获取页面中LI,当页面加载完成后,给LI增加onmouseover事件,再给LI增加onclick事件。
- onclick:判断LI是否存在title,如果不存在则退出;存在则定义LI的onclick事件为把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
- onmouseover:判断是否在加载中,加载中则退出;不在加载中则把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
- 增加事件完毕,隐藏Loading
- 主要函数
- _Load(f):在页面加载完成后运行函数f
- _G(o,t,p):返回p对象中ID(TagName,Name)为o的对象
|
  |
body{background:#FFF;margin:0px;padding:0px;font-size:14px;}
div{padding:0px;width:50%;background:#000;float:right;height:100%}
div ul{overflow:hidden;list-style:none;padding:4px 2px 0px 2px;margin:20px 20px 0px 20px;background:#aaa;height:29px;width:92%;*width:100%}
div ul li{padding:5px 8px;background:#eee;float:left;margin-left:4px;margin-top:2px;color:#666}
.cu{font-size:18px;background:#fff;color:#000;border:#ccc solid 2px;border-bottom:none;margin-top:-4px;*margin-top:-5px;height:21px;}
#lo{z-index:100;background:#ff0;float:right;margin-top:-4px;margin-right:-2px;color:#f00;height:16px;padding:2px;}
#lo span{color:#000;}
#lo strong{text-decoration:underline;}
iframe{padding:0px 2px;margin:0px 20px 20px 20px;background:#fff;border:none;width:92%;*width:100%;height:88%}
table{width:48%;height:93%;*height:94%;background:#000;margin:2% 1%;padding:0px;border:none;}
th,.ti{font-size:18px;background:#ccc;padding:4px 0px 0px 0px;height:22px;text-align:center;color:#000}
td{color:#fff;font-size:14px;background:#666}
td ul{margin-right:30px;list-style:none;margin-left:20px;padding:0px;}
td li strong{padding:0px 0px 0px 20px;font-size:20px;} |
body{background:#FFF;margin:0px;padding:0px;font-size:14px;}
div{padding:0px;width:50%;background:#000;float:right;height:100%}
div ul{overflow:hidden;list-style:none;padding:4px 2px 0px 2px;margin:20px 20px 0px 20px;background:#aaa;height:29px;width:92%;*width:100%}
div ul li{padding:5px 8px;background:#eee;float:left;margin-left:4px;margin-top:2px;color:#666}
.cu{font-size:18px;background:#fff;color:#000;border:#ccc solid 2px;border-bottom:none;margin-top:-4px;*margin-top:-5px;height:21px;}
#lo{z-index:100;background:#ff0;float:right;margin-top:-4px;margin-right:-2px;color:#f00;height:16px;padding:2px;}
#lo span{color:#000;}
#lo strong{text-decoration:underline;}
iframe{padding:0px 2px;margin:0px 20px 20px 20px;background:#fff;border:none;width:92%;*width:100%;height:88%}
table{width:48%;height:93%;*height:94%;background:#000;margin:2% 1%;padding:0px;border:none;}
th,.ti{font-size:18px;background:#ccc;padding:4px 0px 0px 0px;height:22px;text-align:center;color:#000}
td{color:#fff;font-size:14px;background:#666}
td ul{margin-right:30px;list-style:none;margin-left:20px;padding:0px;}
td li strong{padding:0px 0px 0px 20px;font-size:20px;}
var _class;
function _Load(f){
_class=window.ActiveXObject?"className":"class";
window.onload=typeof window.onload != "function"?f:function(){f();}
}
function _G(o,t,p){
if(!p)
p=document;
switch(t){
case "name":return p.getElementsByName(o);
case "tagname":return p.getElementsByTagName(o);
default:return p.getElementById(o);
}
}
function _L(){
var x=_G("li","tagname",_G("div","tagname")[0]);
for(i=0;i<x .length;i++){
x[i].onmouseover=function(){
this.onclick=function(){
if(this.getAttribute("title")){
for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
this.setAttribute(_class,"cu");
_G("lo").style.display="block";
_G("xto","name")[0].src=this.getAttribute("title");
_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
}
}
if(_G("lo").style.display=="none"&&this.getAttribute(_class)!="cu"){
for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
this.setAttribute(_class,"cu");
_G("lo").style.display="block";
_G("xto","name")[0].src=this.getAttribute("title");
_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
}
}
}
_G("span","tagname",_G("lo"))[0].onmouseover=function(){
this.onclick=function(){
_G("lo").style.display="none";
}
}
_G("lo").style.display="none";
}
_Load(_L);
//-->
</x> |
var _class;
function _Load(f){
_class=window.ActiveXObject?"className":"class";
window.onload=typeof window.onload != "function"?f:function(){f();}
}
function _G(o,t,p){
if(!p)
p=document;
switch(t){
case "name":return p.getElementsByName(o);
case "tagname":return p.getElementsByTagName(o);
default:return p.getElementById(o);
}
}
function _L(){
var x=_G("li","tagname",_G("div","tagname")[0]);
for(i=0;i<x .length;i++){
x[i].onmouseover=function(){
this.onclick=function(){
if(this.getAttribute("title")){
for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
this.setAttribute(_class,"cu");
_G("lo").style.display="block";
_G("xto","name")[0].src=this.getAttribute("title");
_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
}
}
if(_G("lo").style.display=="none"&&this.getAttribute(_class)!="cu"){
for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
this.setAttribute(_class,"cu");
_G("lo").style.display="block";
_G("xto","name")[0].src=this.getAttribute("title");
_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
}
}
}
_G("span","tagname",_G("lo"))[0].onmouseover=function(){
this.onclick=function(){
_G("lo").style.display="none";
}
}
_G("lo").style.display="none";
}
_Load(_L);
//-->
</x>
<div>
<ul>
<li id="lo">Loading...<span title="解除锁定">[<strong>x</strong>]</span></li>
<li class="cu" title="#">空白页</li>
<li title="http://www.wxcmnet.cn/">无限CMNET</li>
<li title="http://www.miaoqiyuan.cn/">苗启源 Home</li>
<li title="http://www.haoniux.cn/">好牛X</li>
</ul>
<iframe src="about:blank" name="xto"></iframe>
</div> |
<div>
<ul>
<li id="lo">Loading...<span title="解除锁定">[<strong>x</strong>]</span></li>
<li class="cu" title="#">空白页</li>
<li title="http://www.wxcmnet.cn/">无限CMNET</li>
<li title="http://www.miaoqiyuan.cn/">苗启源 Home</li>
<li title="http://www.haoniux.cn/">好牛X</li>
</ul>
<iframe src="about:blank" name="xto"></iframe>
</div>