`
charrys
  • 浏览: 36195 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

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

    博客分类:
  • js
阅读更多

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

分享到:
评论

相关推荐

    tab自动切换

    这在需要特殊焦点顺序或者需要禁用某些元素的Tab切换时非常有用。 对于桌面应用和操作系统,Tab自动切换通常由窗口系统或应用程序框架提供。例如,在Windows和macOS中,大多数窗口内的控件已经内置了对Tab键的支持...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    jQuery Tab 插件就是一种轻量级的解决方案,能够帮助开发者轻松实现多种交互功能,如鼠标滑过、点击切换、自动切换以及数据回调。本插件特别适合那些希望提升用户体验并简化页面布局的网站开发者。 首先,让我们...

    Tab菜单自动切换效果

    最后,JavaScript负责处理交互逻辑,实现Tab的自动切换。这里可以使用`setInterval`函数定时切换Tab,同时更新对应的CSS类。以下是一个简单的示例: ```javascript let index = 0; // 当前选中的Tab索引 const tabs...

    鼠标滑动Tab选项卡切换特效

    在网页设计中,用户体验往往起到关键作用,而“鼠标滑动Tab选项卡切换特效”是提升用户交互体验的一种常见方式。这种技术使得用户可以通过简单的鼠标滑动在不同的内容区域之间进行切换,无需点击,增加了浏览的流畅...

    鼠标滑动tab切换

    在网页设计中,用户体验是至关重要的,而"鼠标滑动tab切换"是一种常见的交互效果,它使得用户可以通过鼠标滑动来轻松浏览和切换不同的内容区域,例如产品介绍、服务详情等。这种效果大大提升了用户的浏览体验,使得...

    jquery实现的tab标签鼠标经过自动切换选项卡特效源码.zip

    本资源"jquery实现的tab标签鼠标经过自动切换选项卡特效源码.zip"提供了使用jQuery创建的Tab切换效果的源代码,这种效果常用于网页设计,以增强用户体验和界面交互性。 Tab组件是网页设计中常用的一种布局方式,它...

    网页Tab选项卡延迟切换和自动切换效果

    自动切换效果是指Tab选项卡在一定时间间隔后自动从一个Tab切换到下一个Tab,常见于轮播展示或者动态更新信息的场景。这通常可以通过JavaScript的setInterval函数实现。 首先,我们需要定义一个变量来跟踪当前选中的...

    tab ajax自动切换

    3. JavaScript编程:实现Tab切换逻辑,包括事件监听、AJAX请求和响应处理。 4. AJAX技术:异步与服务器交互,获取和更新Tab内容。 5. 自动切换机制:通过定时器实现Tab的自动循环切换。 6. 用户体验优化:添加暂停、...

    js鼠标滑过标签选项卡切换代码.zip

    "JS特效"意味着这是JavaScript技术实现的动态效果,而"选项卡TAB"则指的是用户界面中常见的一个多页面视图,通过一组可切换的标签来组织内容。这种布局方式可以有效地节省页面空间,同时保持信息的清晰性和易用性。 ...

    分步解析JavaScript实现tab选项卡自动切换功能

    值得一提的是,在实现自动切换功能时,我们可能还需要考虑一些交互细节,比如在鼠标悬停某个tab项时,自动切换功能是否暂停,或者当用户主动切换tab时,自动切换是否被禁用。这些都需要通过添加适当的条件判断和事件...

    tab自动轮播,鼠标移动感应

    在网页设计中,"tab自动轮播,鼠标移动感应"是一种常见的交互效果,它主要用于展示多张图片或信息,使得用户无需手动切换就能查看所有内容。这种效果在产品展示、新闻滚动、幻灯片等场景中非常常见。下面将详细解释...

    html5 滑动页面切换tab

    2. 触摸事件优化:处理触摸事件时,防止滚动事件的默认行为(`e.preventDefault()`),以确保只有Tab切换而不会触发页面滚动。 3. 响应式设计:确保滑动切换在不同屏幕尺寸和设备上都能良好工作,可能需要调整Tab...

    HTML实现的Tab切换效果,点击滑动和触控滑动(SlideTouch插件)

    在实现Tab切换时,通常会用到HTML、CSS和JavaScript。HTML用于构建基础结构,定义各个Tab和内容区域;CSS用于样式设置,使Tab和内容区域美观且布局合理;JavaScript则负责交互逻辑,监听用户的点击或滑动事件,并...

    jquery渐变切换tab标签

    3. **jQuery初始化**:在页面加载完成后,使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域,只显示第一个内容,以及添加点击事件监听器到每个Tab标题。 4. **事件处理**:当用户...

    JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)

    根据提供的文件信息,我们可以从中提取关于JavaScript和Tab切换的相关知识点,这些知识点包括自动切换、鼠标移入时停止切换、鼠标移开后恢复切换的功能。接下来,我们将详细地展开讲解这些知识点。 首先,...

    跟随鼠标自动变换的TAB

    3. **JavaScript/jQuery事件**:利用JavaScript或jQuery监听鼠标移动事件(`mousemove`),当鼠标移动到某个TAB上时,通过改变CSS类或修改DOM内容来切换对应的显示内容。 4. **动画效果**:为了增加用户体验,还...

    纯css半圆角tab标签切换代码

    在Tab切换中,`:hover`通常用于鼠标悬停时的效果,`:active`表示元素被按下或触摸的状态,`:focus`则用于元素获得键盘焦点的情况。 3. **定位和布局**:CSS的定位技术,如`position`(静态、相对、绝对、固定),...

    layui Tab选项卡切换跟随特效(源码)

    当用户点击某个选项卡时,layui会通过JavaScript事件监听器触发相应的切换行为,隐藏当前选项卡内容并显示所选内容。layui API提供了如`layui.tab()`和`layui.tab.change()`等方法,用于操作和控制选项卡。 在描述...

    HTML实现Tab选项卡(自动+手动)

    为了提高用户体验,可以添加一些增强功能,如防止快速点击导致多次切换、添加过渡动画、处理鼠标悬停事件等。例如,可以添加一个`setTimeout`来清除之前的点击事件,避免连续点击导致的快速切换: ```javascript ...

    JavaScript实现的tab标签自动切换效果源码(jQuery)

    为了让这个tab切换效果在不同设备上都能正常工作,我们可能需要考虑响应式设计。这可以通过使用CSS媒体查询或者JavaScript根据屏幕宽度调整间隔时间来实现。 通过以上步骤,我们就实现了一个基于jQuery的自动切换...

Global site tag (gtag.js) - Google Analytics