QQ新闻面板的效果，怎么弄的呢，大家帮我啊

Question

就是可以左右拉动新闻项的效果。然后下边是对应的新闻显示 就是这样的效果，大家帮我啊。谢谢

Answer 1

Tabpannel.js
/*
    Module:SimpleTab
*/
var TabPannel = function(tabIdArray){
this.tabArray = new Array();
for(var i = 0; i < tabIdArray.length; i++){
this.tabArray[i] = document.getElementById(tabIdArrary[i]);
}
var tabPannel = this;
for(var i = 0; i < tabPannel.tabArray.length; i++){
tabPannel.tabArray[i].onmouseover = function(event){
var srcElement;
if(window.event){
srcElement = window.event.srcElement;
}else{
srcElement = event.target;
}
var tabContent;
for(var i = 0; i < tabPannel.tabArray.length; i++){
tabContent = document.getElementById(tabPannel.tabArray[i].attributes.getNamedItem("tabId").nodeValue);
if(srcElement.id != tabPannel.tabArray[i].id){
tabContent.style.display = "none";
}else{
tabContent.style.display = "block";
}
}
srcElement.className = srcElement.attributes.getNamedItem("cssMover").nodeValue;
}
tabPannel.tabArray[i].onmouseout = function(event){
var srcElement;
if(window.event){
srcElement = window.event.srcElement;
}else{
srcElement = event.target;
}
srcElement.className = srcElement.attributes.getNamedItem("CssMout").nodeValue;
}
}
}
--调用 <div  class="tabPannel">
<div class="tabContainer">
<ul>
<li id="tab5" tabId="tabContent5" cssMover="mouseover" CssMout="mouseout" class="mouseout">综合</li>
<li id="tab4" tabId="tabContent4" cssMover="mouseover" CssMout="mouseout" class="mouseout">人物</li>
<li id="tab3" tabId="tabContent3" cssMover="mouseover" CssMout="mouseout" class="mouseout">专题</li>
<li id="tab2" tabId="tabContent2" cssMover="mouseover" CssMout="mouseout" class="mouseout">业界</li>
<li id="tab1" tabId="tabContent1" cssMover="mouseover" CssMout="mouseout" class="mouseout">热点</li>
<li><img src="images/news.gif" onclick="javascript:location='news.html'" alt="资讯"/></li>
<br class="clear" />
</ul>
</div>
<div id="tabContent1" class="tabContentContainer" style="display:block;">
<ul>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
<li><a href="#"> ·从弘扬南阳玉文化开始--《玉界》春节特刊开篇语</a></li>
</ul>
</div>
<div id="tabContent2" class="tabContentContainer" style="display:none">
<ul>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
<li><a href="#"> ·迄今最大南阳玉籽料面世 雕什么需待大师“会诊”</a></li>
</ul>
</div>
<div id="tabContent3" class="tabContentContainer" style="display:none">
<ul>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
<li><a href="#"> ·烟台质检所黄金珠宝产品检测站正式营业</a></li>
</ul>
</div>
<div id="tabContent4" class="tabContentContainer" style="display:none">
<ul>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
</ul>
</div>
<div id="tabContent5" class="tabContentContainer" style="display:none">
<ul>
<li><a href="#"> ·观念对当代玉雕艺术的召唤-1-陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
<li><a href="#"> ·观念对当代玉雕艺术的召唤--陈曙明</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/Tabpannel.js"></script>
<script type="text/javascript">
var tabIdArrary = new Array("tab1", "tab2", "tab3", "tab4","tab5");
TabPannel(tabIdArrary);
</script>