新微赢技术网

标题: [讨论]像中华网这样的层技术,是怎么实现的? [打印本页]

作者: 冷冷DI草 时间: 2010-1-7 07:28
标题: [讨论]像中华网这样的层技术,是怎么实现的?
http://www.china.com中间的那个新闻\品味\健康\宽频等的那个层,一个定时自己转换,另一个时点上面的键接出现对应的层,是怎么实现的,哪位大哥知道.

作者: ═━灆涩━═ 时间: 2010-1-7 07:28
呵呵,你可以给一个看一看吗?我已经找了很多了,没有我想要结果.

作者: |°妳卟懂莪 时间: 2010-1-7 07:28
还有这个 AJAX做的看看对你有帮助没
附件: 只有本站会员才能下载或查看附件，请您登录或注册

作者: 枫之泪-天涯 时间: 2010-1-7 07:28
谢了,我试一试了.

作者: 大天使路西法 时间: 2010-1-7 07:28
javascript那里看看吧有你想要的

作者: 卐孬孬卐 时间: 2010-1-7 07:28
<style>
* {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; list-style:none;}
body {background: #FFFFCC;margin:100px 0 0 100px;}
#info {border:1px solid #FFCC66;padding:30px;background:#f7f7f7;width:500px;}
#kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(o200742501718.gif) repeat-x left bottom;height:30px;}
#info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; background:#fff; clear:both; }
h4{ font-weight:normal;float:left;border-right:1px solid #fff;}
.hd {display:none;}
.sw {display:block;}
#info li {float:left;}
#info li a{float:left; display:block; padding:4px 10px 4px 10px; color:#37572E; text-decoration:none}
#info li a:hover{ background:#E9FE70; color:#000}
#info ul { float:left; margin-top:-28px; padding:5px 0; position:absolute}
#info .ha a{ color:#FFF}
#info .ha a:hover{color:#FFF; background:none}
#info .ha .hc:hover{background:url(5200742501725.gif) no-repeat center bottom; }
.ha {background:url(a20074250170.gif) no-repeat left top;margin-top:-3px;padding-top:3px;}
.hb{ background:url(x200742501712.gif) no-repeat right top; margin-top:-3px; padding-top:3px;}
.hc {background:url(5200742501725.gif) no-repeat center bottom; height:17px; color:#FFF; font-weight:bold}
</style>
<script language="javascript">
var k = Math.floor(Math.random()*5+1);
for(i=1; i <6; i++){
if( i==k){
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).className="ha";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
}
else{
document.getElementById("info"+i).className="hd";
}
}
function kijijitag(tag){
for(i=1; i <6; i++)
{
if (i==tag)
{
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).className="ha";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
}
else{
document.getElementById("info"+i).className="hd";
document.getElementById("tag"+i).className="";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
}
}
}
</script>
<div id="info">
<div id="kjj_tag"> </div>
<ul>
<li id="tag1"><h4><a href="javascript:kijijitag('1');">热门活动</a></h4></li>
<li id="tag2"><h4><a href="javascript:kijijitag('2');" >最新功能</a></h4></li>
<li id="tag3"><h4><a href="javascript:kijijitag('3');" >服务承诺</a></h4></li>
<li id="tag4"><h4><a href="javascript:kijijitag('4');" >最新成功故事</a></h4></li>
<li id="tag5"><h4><a href="javascript:kijijitag('5');" >热贴推荐</a></h4></li>
</ul>
<div id="info1"><a href="http://www.zishu.cn" target="blank">子鼠00001</a></div>
<div id="info2"><a href="http://www.zishu.cn" target="blank">子鼠00002</a></div>
<div id="info3"><a href="http://www.zishu.cn" target="blank">子鼠00003</a></div>
<div id="info4"><a href="http://www.zishu.cn" target="blank">子鼠00004</a></div>
<div id="info5"><a href="http://www.zishu.cn" target="blank">子鼠00005</a></div>
</div>

看看子鼠大哥的这个对你有用没

欢迎光临新微赢技术网 (http://bbs.weiying.cn/)