网页前端设计

http://www.86y.org

搜索文章

js多Tab自动切换,带完善的鼠标事件

用声音读出全文关注我吧
 2011/2/28 15:25:45 阅读次数:7316

js多Tab自动切换,带完善的鼠标事件,幸凡制作! 说明:打开鼠标时间后,鼠标经过标题时显示相应内容,鼠标经过标题或经过内容时停止自动切换,当鼠标移开时继续自动切换。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js多Tab自动切换,带完善的鼠标事件,幸凡制作http://www.86y.org</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
*{margin:0;padding:);}
body{font-size:25px}
.tab_title{height:30px;line-height:30px;overflow:hidden;}
.tab_title a,.tab_title a:link,.tab_title a:visited{padding:0 8px;display:block;background:#960;float:left;color:#fff;margin-right:5px;font-size:14px;}
.tab_title a:hover {background:#999}
.tab_title a.crent_tab:link {background:#ff0000}
.tab_title a.crent_tab:visited {background:#ff0000}
#tab_lista,#tab_listb,#tab_listc,#tab_listd{width:400px;}
#tab_lista p.crent_div,#tab_listb p.crent_div,#tab_listc p.crent_div,#tab_listd p.crent_div{clear:both;font-size:20px;display:block;}
#tab_lista p,#tab_listb p,#tab_listc p,#tab_listd p{display:none;margin:0;padding:5px;}
#tab_lista p{background:#ccc}
#tab_listb p {background:#ff9}
#tab_listc p{background:#6ff}
#tab_listd p{background:#f90;}
</style>
</head>
<body>
<div id="tab_lista">
    <div class="tab_title">  
		<a href="#" class="crent_tab" id="a1">1</a>  
		<a href="#" id="a2">2</a>  
		<a href="#" id="a3">3</a>  
		<a href="#" id="a4">4</a>  
		<a href="#" id="a5">5</a>自动切换时间5秒
    </div>  
    <p class="crent_div" id="tab_a1">1</p>  
    <p id="tab_a2">2</p>  
    <p id="tab_a3">3</p>  
    <p id="tab_a4">4</p>  
    <p id="tab_a5">5</p>  
</div>
<div id="tab_listb">
    <div class="tab_title">  
		<a href="#" class="crent_tab" id="b1">b1</a>  
		<a href="#" id="b2">b2</a>  
		<a href="#" id="b3">b3</a>  
		<a href="#" id="b4">b4</a>  
		<a href="#" id="b5">b5</a>  
		<a href="#" id="b6">b6</a>自动切换时间3秒,已打开鼠标事件
    </div>  
    <p class="crent_div" id="tab_b1">b1</p>  
    <p id="tab_b2">b2</p>  
    <p id="tab_b3">b3</p>  
    <p id="tab_b4">b4</p>  
    <p id="tab_b5">b5</p>  
    <p id="tab_b6">b6</p>
</div>    
<div id="tab_listc">
    <div class="tab_title">  
		<a href="#" class="crent_tab" id="c1">c1</a>  
		<a href="#" id="c2">c2</a>  
		<a href="#" id="c3">c3</a>不自动切换,鼠标事件打开 
    </div>  
    <p class="crent_div" id="tab_c1">c1</p>  
    <p id="tab_c2">c2</p>  
    <p id="tab_c3">c3</p>
</div>
<div id="tab_listd">
    <div class="tab_title">  
		<a href="#" class="crent_tab" id="d1">c1</a>  
		<a href="#" id="d2">c2</a>  
		<a href="#" id="d3">c3</a>自动切换,鼠标事件打开 
    </div>  
    <p class="crent_div" id="tab_d1">d1</p>  
    <p id="tab_d2">d2</p>  
    <p id="tab_d3">d3</p>
</div>
<script type="text/javascript"> 
var $=function(id){return "string"==typeof id?document.getElementById(id):id;};
//设置切换
var ss=new Array;
//ss["标识"]=Array(数量,时间(毫秒),"change","是否打开自动切换",0,"是否开启鼠标事件");
ss["a"]=Array(5,5000,"change",true,0,false);
ss["b"]=Array(6,3000,"change",true,0,true);
ss["c"]=Array(3,2000,"change",false,0,true);
ss["d"]=Array(3,3000,"change",true,0,true);
//鼠标设置及执行自动切换
for(var s in ss){
	mouses(s);
	autochange(s);
}
//鼠标事件函数
function mouses(s){
	if(ss[s][5]){
		for(var i=1;i<=ss[s][0];i++){
			$(s+i).onmouseover=function(){clearTimeout(ss[s][2]);changeonce(s,this.attributes.getNamedItem("id").nodeValue.split(s)[1]);}
			$(s+i).onmouseout=function(){ss[s][4]=0;autochange(s);}
			$("tab_"+s+i).onmouseover=function(){clearTimeout(ss[s][2]);changeonce(s,this.attributes.getNamedItem("id").nodeValue.split("tab_"+s)[1]);}
			$("tab_"+s+i).onmouseout=function(){ss[s][4]=0;autochange(s);}	
		}
	}
}
//切换一次函数
function changeonce(s,id){   
    for(var i=1;i<=ss[s][0];i++){ 
        if(i==id) {   
            $(s+i).className="crent_tab";  
            $("tab_"+s+i).className="crent_div";             
        } else {   
            $(s+i).className="";  
            $("tab_"+s+i).className="";           
        }   
    }
} 
//自动切换函数
function autochange(s){
	if(ss[s][3]){
		for(var i=1;i<=ss[s][0];i++){ 
			if($(s+i).className=="crent_tab"){
				var id=ss[s][4]?(i%ss[s][0]?i+1:1):i;
				break;
			}
		}
		changeonce(s,id);
		ss[s][2] = setTimeout("autochange(\""+s+"\");",ss[s][1]);
		ss[s][4]=1;
	}else{
		return false;	
	}
}
</script>
</body>
</html>

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭