首 页 ┆ 源码下载 ┆ IT学院 ┆ 字体下载 ┆ 模板下载 ┆ 源码发布 ┆ 广告合作 ┆ 网站地图 ┆ 虚拟主机 ┆ 中文域名
► 设为首页
► 加入收藏
► 联系我们
源码下载 >> ASP源码 | PHP源码 | ASP.net源码 | JSP源码 | CGI源码 | VC/C++源码 | VB源码 | Delphi源码 | Flash源码
文章学院 >> 网络编程 | 网页设计 | 图形图象 | 数据库 | 服务器 | 网络媒体 | 网络安全 | 操作系统 | 办公软件 | 软件开发 | 黑客知识
字体下载 >> 精制字体 | 非英字体 | 艺术字体 | 著名字体 | 哥特式 | 简单字体 | 手写体 | 节假日 | 图案字体 | 精度像素 | 中文字体
模板下载 >> 企业门户 | 数码网络 | 休闲娱乐 | 影视音乐 | 旅游名胜 | 文化艺术 | 电子商务 | 个性展示 | 登陆导航 | Flash模板
►►您当前的位置:源码园 → IT学院 → 黑客知识 → 网管专题 → 文章内容

雅虎、网易[Ajax标签导航]效果的实现--雅虎,网易,Ajax,标签,导航,效果,实现

作者:佚名  来源:网上收集  发布时间:2007-1-5 0:25:29
功能的实现思路:

S1  雅虎中国

·单击触发
·<A>块锁定:a{display:block;height:16px;}/*将A锁定为块级,再定义高度和宽度*/
·再次单击弹出链接:在<A>标记的onclick事件中需要执行读取时,return false;否则return true;
·AJAX读取数据
·数据暂存
·窗口平滑收缩
<!--由于我看不懂雅虎的代码,所以使用了一些基本的代码去实现这些功能,可能效率不高,不过效果是出来了.-->

S2    网易
·鼠标滑过延时触发: onmouseover时var waitInterval=window.setTimeout("func();",300);onmouseout时clearTimeout(waitInterval);
·<A>块锁定、AJAX读取数据、数据暂存、窗口平滑收缩
<!--还是网易的代码简单,直接拿来用了-->

综合效果:
http://www.lorlo.com/tab.html

JS文件分析:



程序代码
function getObject(objectId) {  //获得DOM对象通用函数
     if([code]document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
       return document.getElementById(objectId);
     } 
     else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
       return document.all(objectId);
     } 
     else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
       return document.layers[objectId];
     } 
     else {
       return false;
    }
} 

var responsecont;
var xmlHttp;
var requestType;
var newsstring;
var ajccache=new Object();      //定义缓存对象
var url;
var MouseDelayTime=200;//鼠标感应延迟
var waitInterval;  

//判别浏览器类型的通用函数
var Browser = new Object();
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1);


//ajax相关处理
function CreateXMLHttpRequest(){
   // Initialize Mozilla XMLHttpRequest object
   if (window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest();
   } 
   // Initialize for IE/Windows ActiveX version
   else if (window.ActiveXObject) {
       try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
       } 
       catch (e){
            try{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){newsstring = "<div class='loading'>Loading rquest content fail, Please try it again latter...</div>";}
       }
   }
}
function getnews(tagid,x){
   url = "tab/"+tagid+'_'+x+'.html';
   requestType = tagid;
if(ajccache[url]==null){
   CreateXMLHttpRequest();   
   xmlHttp.onreadystatechange = processRequestChange;
   xmlHttp.open("GET", url, true);
   xmlHttp.setRequestHeader("If-Modified-Since","0");
   xmlHttp.send(null);  
}
else
{  shownews(requestType,ajccache[url]);    }
}
function processRequestChange(){
   // only if xmlHttp shows "complete"
   if (xmlHttp.readyState == 4){
      // only http 200 to process
      if (window.location.href.indexOf("http")==-1 || xmlHttp.status == 200){
         newsstring = xmlHttp.responseText;
         //inject centent to tab-pane
            shownews(requestType,newsstring);
            ajccache[url]=newsstring;
      }
   }
}
function shownews(requestType,newsstring){
//<![CDATA[
    responsecont = getObject(requestType+'_cnt');
    responsecont.innerHTML = newsstring;
//]]>
}

[1] [2] 下一页  

[] [返回上一页] [打 印]
  • 上一篇文章:2007年的感染者(仿威金)U盘使用需谨慎--2007,感染者,仿威金,U盘
  • 下一篇文章:雅虎、网易[Ajax标签导航]效果的实现-CSS--雅虎,网易,Ajax,标签,导航,效果,实现,CSS

  • 相关文章:
  • [图文]雅虎、网易[Ajax标签导航]效果的实现-HTML--雅...
  • 雅虎、网易[Ajax标签导航]效果的实现-CSS--雅虎,网易...
  • 雅虎、网易[Ajax标签导航]效果的实现--雅虎,网易,Aj...
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 源码发布
Copyright © 2003-2009 Ymyasp.Com. All Rights Reserved .
备案序号:粤ICP备07029071号