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

charrys

浏览: 35802 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JavaScript HTML XHTML

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.ok22.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>

来自:http://www.ok22.org/art_detail.aspx?id=119

分享到：

js遮罩层 | js多个tab切换简单不需要在body内添加事件 ...

2011-03-01 09:31
浏览 1550
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

我的json获取数据实例，直接运行就可以看到了

ckeditor 编辑器+finder配置上传功能

kindeditor/ckeditor 编辑器加+图片自动上传成功（源码下载)

js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)

js遮罩层

js多个tab切换简单不需要在body内添加事件

js文字上下滚动+左右滚动兼容FF/IE

前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态

清空数组的两种方式

js时间倒计时

JS可以控制样式的名称写法

js给C#控件赋值

iframe里面的页面调用父窗口,左右窗口js函数的方法

关于图片延迟加载技术-ImageLazyLoad

js判断父页存在

最近访客更多访客>>