- 浏览: 35065 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
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 1273开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
ckeditor 编辑器+finder配置上传功能
2011-04-03 11:53 1283一、官方Download 1、CKEditor ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1964编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1357iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 766直接贴代码了!(来自:http://www.ok22.org/ ... -
js多个tab切换简单不需要在body内添加事件
2011-02-15 17:20 1306注意的是a的里面的rel属性window.onload事件!在 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1754我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1292看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2230方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 843前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 989盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1732前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1187iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1067关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 775当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等
html5 滑动页面切换tab,点击tab也可以切换,非常实用。
tab标签切换效果,标签切换部分背景可以设置多种色调,这是与其他tab标签有所区别的地方。懒人之家推荐下载
Js鼠标滑过标签选项卡切换代码是一款来自医院美容网站的js特效。
主要介绍了JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)的相关资料,需要的朋友可以参考下
javascript实现简易的tab选项卡切换效果
一款非常美观的CSS3鼠标悬停项目价格表内容TAB切换特效,TAB切换与下方的进度条交互效果棒极了。
jQuery全屏TAB页面切换代码是一款通过鼠标滚动页面或点击导航,tab页面滚屏切换效果代码。
并非是懒人站长真的懒了,而是tab切换,特别是jQuery版本的,无论是点击,还是鼠标悬停,其代码原理是一致的 多发版本无非是浪费大家的时间,而且还会扰乱大家选择的视线 不过今天推荐的这个版本稍...
jquery滑动切换tab,当鼠标移动到某个tab的时候选项卡自动滑动到那个tab,默认是第一个选中,给人的体验相当不错,代码简明
tab选项卡是常见的网页效果,也叫滑动门特效,本资源实现自动调转和手动(click onmouseover)切换
主要介绍了js实现点击切换TAB标签的方法,涉及javascript鼠标点击事件及页面元素的遍历技巧,需要的朋友可以参考下
网页层切换效果_TAB效果大全,利用javascript和css让页面的tab进行切换包括鼠标经过,点击等
该代码主要实现了菜单tab的切换选择,当鼠标移到菜单上时,显示对应的内容
Js网页TAB,图片轮播插件附示例代码,包括了选项卡和网页焦点图效果的图片展示插件,都是些常用的网页特效代码,LixTabs,javascript TAB切换类,LixTabs:实现一个普通的tab选项卡切换效果,不自动,无延迟,鼠标指向...
上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。 一、仿”中国人民大学“官网的tab切换,背景是图片,效果图如下: 鼠标移到新闻...
主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
主要介绍了JS封装的选项卡TAB切换效果,结合实例形式分析了javascript响应鼠标事件动态操作页面元素属性实现tab切换的相关技巧,需要的朋友可以参考下
主要为大家详细介绍了js实现移动端tab切换时下划线滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下