雅虎、网易ajax标签领航效果的实现

2012-11-22

雅虎、网易ajax标签导航效果的实现经过多次改进，可以在普通网站上直接使用了，现在发布源程序下载（编码为utf

雅虎、网易ajax标签导航效果的实现
经过多次改进，可以在普通网站上直接使用了，现在发布源程序下载（编码为utf-8，改为gb3212的方法是：用记事本打开，另存时选择相应的编码），希望对大家有用（虽然不一定实用）。
因为只是标签导航,所有内容还会在频道页中体现,所在全部用AJAX读取。
功能的实现思路:

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读取数据、数据暂存、窗口平滑收缩

其它功能:
·cookie记忆
·最后读取数据的服务器时间
·滑动门技术

在线效果：
http://www.lorlo.com/tab.html

源码下载（见附件）

JS文件分析：

}
}
var maxh=new Object();
//显示内容框
function displayList(oid){? ?
????var h = 0;??
????var objid=getObject(oid);
????? ?? ?if(isNaN(parseInt(maxh[oid]))) var max_h = 210; // 容器的最大高度
????????else
????????????var max_h = maxh[oid];
????? ?? ?var anim = function(){????????????
????????????????? ? h += 50; // 每次递增50像素
????????????????? ? if(h >= max_h){
????????? ?? ?? ?? ?objid.style.height = max_h + "px";;
????????? ?? ?? ?? ?getObject('tab'+objid.attributes.getNamedItem('id').value).style.background="url(tab/images/tab_bgs.gif) 5px -113px no-repeat"; // 让图片标签改变背景????? ?? ?
????????? ?? ?? ?? ?if(tt){window.clearInterval(tt);}
????????????????? ? }
????????????????? ? else{
? ?? ?? ?? ?? ? objid.style.display="block";
? ?? ?? ?? ?? ? objid.style.height = h + "px";
????????????????? ? }
????????? ? }
????????? ?????
??????????????var tt = window.setInterval(anim,2);??????
}
// 隐藏列表框
function hiddenList(objid){
? ?? ? var h = objid.offsetHeight;
????????? ?var anim = function(){
????????????? ???h -= 50; // 每次递减50像素
????????????? ???if(h <= 5){
????? ?? ?? ?? ? objid.style.display="none";
????????? ?? ?? ???getObject('tab'+objid.attributes.getNamedItem('id').value).style.background="url(tab/images/tab_bgs.gif) -14px -114px no-repeat";
????????? ?? ?? ???if(tt){window.clearInterval(tt);}
????????? ?? ? }
????????? ?? ? else{
????????? ?? ?? ???objid.style.height = h + "px";
????????? ?? ? }
????????? ?}
????????? ???
????????? ?var tt = window.setInterval(anim,2);
}
function showClassList(oid){
var objid=getObject(oid);
? ?if(objid.style.display == "none"){
????if(objid.getElementsByTagName("img").length==0)TabNews(oid.substring(0,oid.indexOf("_")),1);
? ?? ? displayList(oid); // 显示内容框
????SetCookie(oid+'d',"ture",10000000);
? ?}
? ?else{
? ?? ?if(isNaN(parseInt(maxh[oid]))){
? ?? ?? ?maxh[oid]=objid.offsetHeight; // 内容容器的初始高度
? ?? ?}
? ?? ?hiddenList(objid); // 隐藏内容框
????SetCookie(oid+'d',"none",10000000);SetCookie(oid+'h',maxh[oid],10000000);
? ?}
}

热点排行

Ajax

雅虎、网易ajax标签领航效果的实现