日期:2014-05-16  浏览次数:20369 次

JS滑动门效果

一个JS滑动门

1、滑动门,通用型,理论上不限制滑动门个数,不用超级链接,跳转页面也用JS控制

function gameRankContent(cid,n,cname,conName){
/**
*cid:当前滑动门编号
*n:滑动门个数
*cname:滑动门ID号前缀
*conid:滑动门内容前缀
*/
for(var i = 1;i<=n;i++){
?? if(cid == i){
??? //alert('#'+conName+i);
??? $('#'+conName+i).show();//传统JS中,样式display="block"
??? $('#'+cname+i).css("background","url(images/nBg.gif)");//传统JS中,样式背景为空
??? $('#'+cname+i).css("color","#FFF");//传统JS中,样式文字色彩
?? }else{
??? $('#'+conName+i).hide();//传统JS中,样式display="none"
??? $('#'+cname+i).css("background","");//传统JS中,样式背景为空
??? $('#'+cname+i).css("color","#000");//传统JS中,样式文字色彩
?? }
}
}

function urlonclick(href){
location.href = href;
}

2、用超链接,外部写样式控制,JS内改变样className实现样式改变(通用型)

function swap_tab(cid,n,cname,conName){
?? /**
?? *cid:当前滑动门编号
?? *n:滑动门个数
?? *cname:滑动门ID号前缀
*conid:滑动门内容前缀
*/
for(var i=1;i<=n;i++){
??? ?? obj = document.getElementById(cname+i);
????? cObj = document.getElementById(conName+i);
??? ?? if(cid == i){
????????? obj.className='active';
???????? cObj.style.display = "block";
??????? }else{
????????? obj.className='normal';
?????????? cObj.style.display="none";
???? ?? }
}

}

转载自:http://hi.baidu.com/nbcc/blog/item/a80db4ecbf7867342797916a.html