- 浏览: 36264 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
charrys:
呵自己跟自己留言
JS可以控制样式的名称写法 -
charrys:
自己顶下
我的json获取数据实例,直接运行就可以看到了
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
发表评论
-
我的json获取数据实例,直接运行就可以看到了
2011-04-18 10:36 1319开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
ckeditor 编辑器+finder配置上传功能
2011-04-03 11:53 1334一、官方Download 1、CKEditor ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1998编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1381iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 798直接贴代码了!(来自:http://www.ok22.org/ ... -
js多个tab切换简单不需要在body内添加事件
2011-02-15 17:20 1337注意的是a的里面的rel属性window.onload事件!在 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1789我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1340看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2272方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 871前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 1018盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1780前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1216iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1112关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 834当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
这在需要特殊焦点顺序或者需要禁用某些元素的Tab切换时非常有用。 对于桌面应用和操作系统,Tab自动切换通常由窗口系统或应用程序框架提供。例如,在Windows和macOS中,大多数窗口内的控件已经内置了对Tab键的支持...
jQuery Tab 插件就是一种轻量级的解决方案,能够帮助开发者轻松实现多种交互功能,如鼠标滑过、点击切换、自动切换以及数据回调。本插件特别适合那些希望提升用户体验并简化页面布局的网站开发者。 首先,让我们...
最后,JavaScript负责处理交互逻辑,实现Tab的自动切换。这里可以使用`setInterval`函数定时切换Tab,同时更新对应的CSS类。以下是一个简单的示例: ```javascript let index = 0; // 当前选中的Tab索引 const tabs...
在网页设计中,用户体验往往起到关键作用,而“鼠标滑动Tab选项卡切换特效”是提升用户交互体验的一种常见方式。这种技术使得用户可以通过简单的鼠标滑动在不同的内容区域之间进行切换,无需点击,增加了浏览的流畅...
在网页设计中,用户体验是至关重要的,而"鼠标滑动tab切换"是一种常见的交互效果,它使得用户可以通过鼠标滑动来轻松浏览和切换不同的内容区域,例如产品介绍、服务详情等。这种效果大大提升了用户的浏览体验,使得...
本资源"jquery实现的tab标签鼠标经过自动切换选项卡特效源码.zip"提供了使用jQuery创建的Tab切换效果的源代码,这种效果常用于网页设计,以增强用户体验和界面交互性。 Tab组件是网页设计中常用的一种布局方式,它...
自动切换效果是指Tab选项卡在一定时间间隔后自动从一个Tab切换到下一个Tab,常见于轮播展示或者动态更新信息的场景。这通常可以通过JavaScript的setInterval函数实现。 首先,我们需要定义一个变量来跟踪当前选中的...
3. JavaScript编程:实现Tab切换逻辑,包括事件监听、AJAX请求和响应处理。 4. AJAX技术:异步与服务器交互,获取和更新Tab内容。 5. 自动切换机制:通过定时器实现Tab的自动循环切换。 6. 用户体验优化:添加暂停、...
"JS特效"意味着这是JavaScript技术实现的动态效果,而"选项卡TAB"则指的是用户界面中常见的一个多页面视图,通过一组可切换的标签来组织内容。这种布局方式可以有效地节省页面空间,同时保持信息的清晰性和易用性。 ...
值得一提的是,在实现自动切换功能时,我们可能还需要考虑一些交互细节,比如在鼠标悬停某个tab项时,自动切换功能是否暂停,或者当用户主动切换tab时,自动切换是否被禁用。这些都需要通过添加适当的条件判断和事件...
在网页设计中,"tab自动轮播,鼠标移动感应"是一种常见的交互效果,它主要用于展示多张图片或信息,使得用户无需手动切换就能查看所有内容。这种效果在产品展示、新闻滚动、幻灯片等场景中非常常见。下面将详细解释...
2. 触摸事件优化:处理触摸事件时,防止滚动事件的默认行为(`e.preventDefault()`),以确保只有Tab切换而不会触发页面滚动。 3. 响应式设计:确保滑动切换在不同屏幕尺寸和设备上都能良好工作,可能需要调整Tab...
在实现Tab切换时,通常会用到HTML、CSS和JavaScript。HTML用于构建基础结构,定义各个Tab和内容区域;CSS用于样式设置,使Tab和内容区域美观且布局合理;JavaScript则负责交互逻辑,监听用户的点击或滑动事件,并...
3. **jQuery初始化**:在页面加载完成后,使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域,只显示第一个内容,以及添加点击事件监听器到每个Tab标题。 4. **事件处理**:当用户...
根据提供的文件信息,我们可以从中提取关于JavaScript和Tab切换的相关知识点,这些知识点包括自动切换、鼠标移入时停止切换、鼠标移开后恢复切换的功能。接下来,我们将详细地展开讲解这些知识点。 首先,...
3. **JavaScript/jQuery事件**:利用JavaScript或jQuery监听鼠标移动事件(`mousemove`),当鼠标移动到某个TAB上时,通过改变CSS类或修改DOM内容来切换对应的显示内容。 4. **动画效果**:为了增加用户体验,还...
在Tab切换中,`:hover`通常用于鼠标悬停时的效果,`:active`表示元素被按下或触摸的状态,`:focus`则用于元素获得键盘焦点的情况。 3. **定位和布局**:CSS的定位技术,如`position`(静态、相对、绝对、固定),...
当用户点击某个选项卡时,layui会通过JavaScript事件监听器触发相应的切换行为,隐藏当前选项卡内容并显示所选内容。layui API提供了如`layui.tab()`和`layui.tab.change()`等方法,用于操作和控制选项卡。 在描述...
为了提高用户体验,可以添加一些增强功能,如防止快速点击导致多次切换、添加过渡动画、处理鼠标悬停事件等。例如,可以添加一个`setTimeout`来清除之前的点击事件,避免连续点击导致的快速切换: ```javascript ...
为了让这个tab切换效果在不同设备上都能正常工作,我们可能需要考虑响应式设计。这可以通过使用CSS媒体查询或者JavaScript根据屏幕宽度调整间隔时间来实现。 通过以上步骤,我们就实现了一个基于jQuery的自动切换...