您的位置：首页 > 其它

Tab切换效果制作

2016-05-14 22:53 429 查看

鼠标滑过切换

HTML代码：

<body>
<div id="notice" class="notice">
<div id="noticeTitle" class="noticeTitle">
<ul>
<li class="select"><a href="#">公告1</a></li>
<li><a href="#">公告2</a></li>
<li><a href="#">公告3</a></li>
<li><a href="#">公告4</a></li>
<li><a href="#">公告5</a></li>
</ul>
</div>
<div id="noticeContent" class="noticeContent">
<div class="mod" style="display: block">
<p>内容1内容1内容1内容1内容1内容1内容1
内容1内容1内容1内容1内容1内容1</p>
</div>
<div class="mod" style="display: none">
<p>内容2内容2内容2内容2内容2内容2内容2
内容2内容2内容2内容2内容2内容2</p>
</div>
<div class="mod" style="display: none">
<p>内容3内容3内容3内容3内容3内容3内容3
内容3内容3内容3内容3内容3内容3</p>
</div>
<div class="mod" style="display: none">
<p>内容4内容4内容4内容4内容4内容4内容4
内容4内容4内容4内容4内容4内容4</p>
</div>
<div class="mod" style="display: none">
<p>内容5内容5内容5内容5内容5内容5内容5
内容5内容5内容5内容5内容5内容5</p>
</div>
</div>
</div>
</body>

css代码：

*{
padding:0;
margin: 0;
font-size: 15px;
}
a{
text-decoration: none;
}
.notice{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;

}
.noticeTitle{
height: 27px;
position: relative;
}
.noticeTitle ul{
position: absolute;
width: 301px;
left: -1px;
}
.noticeTitle li{
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
overflow: hidden;
background-color: #fff;
border-bottom: 1px solid #eee;
padding:0 1px;
float: left;
background-color: #F7F7F7;
}
.noticeTitle li a:link,.noticeTitle li a:visited{
color: #333;
}
.noticeTitle li a:hover{
color:#F90;
}
.noticeTitle li.select{
background-color: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding:0;
font-weight: bold;
}
.noticeContent .mod{
margin: 10px 10px 10px 19px;
width: 269px;
height: 51px;
overflow: hidden;
}

鼠标滑过切换js代码：

function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func();
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
//鼠标滑过立马显示切换
function mouseOverMain(){
var noticeTitles=document.getElementById("noticeTitle").getElementsByTagName("li");
var noticeContents=document.getElementById("noticeContent").getElementsByTagName("div");
if(noticeTitles.length!=noticeContents.length){
return;
}
for(var i= 0,len=noticeTitles.length;i<len;i++){
noticeTitles[i].index=i;
//鼠标滑过切换
noticeTitles[i].onmouseover=function(){
if(this.className=='select'){
return;
}
//清除之前的高亮显示
for(var j= 0;j<noticeTitles.length;j++){
if( noticeTitles[j].className='select'){
noticeTitles[j].className=" ";
noticeContents[j].style.display="none";
}
}
this.className="select";
noticeContents[this.index].style.display="block";
}
}
}
addLoadEvent(mouseOverMain);

鼠标滑过延迟切换

鼠标滑过延迟切换js代码：

function setTimeoutMain(){
var noticeTitles=document.getElementById("noticeTitle").getElementsByTagName("li");
var noticeContents=document.getElementById("noticeContent").getElementsByTagName("div");
var timer=null;
if(noticeTitles.length!=noticeContents.length){
return;
}
for(var i= 0,len=noticeTitles.length;i<len;i++){
noticeTitles[i].index=i;
//鼠标滑过切换
noticeTitles[i].onmouseover=function(){
if(this.className=='select'){
return;
}
//如果存在准备执行的定时器，立刻清除，只有当前停留时间大约500s才开始执行
if(timer){
clearTimeout(timer);
timer=null;
}
//延迟半秒执行 setTimeout是隶属于window对象的，this...
var that=this;
timer=setTimeout(function(){
//清除之前的高亮显示
for(var j= 0;j<noticeTitles.length;j++){
if( noticeTitles[j].className='select'){
noticeTitles[j].className=" ";
noticeContents[j].style.display="none";
}
}
that.className="select";
noticeContents[that.index].style.display="block";
},500);
}
}
}
addLoadEvent(<span style="font-family: Arial, Helvetica, sans-serif;">setTimeoutMain</span>);

鼠标滑过延迟切换

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航