JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS实现滑动菜单效果代码。分享给大家供大家参考。具体如下:

这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你。

运行效果截图如下:

JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>选项卡</title>
<style type="text/css">
<!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
.jj { font-weight:bolder!important; }
.box { border-top-color:#c00!important; }
.pr { color:#060!important; }
#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; }
#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer; }
#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }
#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab01 div.up { display:block; }
#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
#tab02 h4.up { color:#c00; }
#tab02 ol { display:none; height:54px; padding:5px; color:#666; }
#tab02 ol.up { display:block; }
#tab03 { position:relative; width:100px; margin:50px; }
#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; }
#tab03 h3.up { z-index:3; color:#c00; background:#fff; }
#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab03 div.tab.up { display:block; }
-->
</style>
</head>
<body>
<div id="tab01">
 <h3>首页</h3>
  <div class="jj"><p>嘿嘿,无视div原始class值。</p></div>
 <h3 class="pr">测试</h3>
  <div><p>继续无视h3原始class值。</p></div>
 <h3>无聊</h3>
  <div><p>h3没有值也可以~</p></div>
 <h3 class="box">傻蛋</h3>
  <div><p>div没有值一样可以~</p></div>
</div>
<div id="tab02">
 <h4>首页</h4>
  <ol class="pr"><li>嘿嘿,无视容器原始class值。</li></ol>
 <h4 class="box">测试</h4>
  <ol><li>继续无视h3原始class值。</li></ol>
 <h4>无聊</h4>
  <ol><li>h3没有值也可以~</li></ol>
 <h4 class="bb">傻蛋</h4>
  <ol><li>div没有值一样可以~</li></ol>
</div>
<div id="tab03">
 <h3>首页</h3>
  <div class="tab"><p>嘿嘿,无视h3原始class值。</p></div>
 <h3>测试</h3>
  <div class="tab wushi"><p>继续无视div原始class值。</p></div>
 <h3>无聊</h3>
  <div class="tab"><p>h3没有值也可以~</p></div>
 <h3 class="box">傻蛋</h3>
  <div class="tab tab123"><p>class值相似一样也可以~</p><div><p>指定class后,即时再多一个div也行。</p></div></div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
 if(!tag){
  return document.getElementById(id);
  }
 else{
  return document.getElementById(id).getElementsByTagName(tag);
  }
}
function tab(id,hx,box,iClass,s,pr){
 var hxs=Pid(id,hx);
 var boxs=Pid(id,box);
 if(!iClass){ // 如果不指定class,则:
  boxsClass=boxs; // 直接使用box作为容器
 }
 else{ // 如果指定class,则:
  var boxsClass = [];
  for(i=0;i<boxs.length;i++){
   if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
    boxsClass.push(boxs[i]);
   }
  }
 }
 if(!pr){ // 如果不指定预展开容器,则:
  go_to(0); // 默认展开序列
  yy();
 }
 else {
  go_to(pr);
  yy();
 }
 function yy(){
  for(var i=0;i<hxs.length;i++){
   hxs[i].temp=i;
   if(!s){// 如果不指定事件,则:
    s="onmouseover"; // 使用默认事件
    hxs[i][s]=function(){
     go_to(this.temp);
    }
   }
   else{
    hxs[i][s]=function(){
     go_to(this.temp);
    }
   }
  }
 }
 function go_to(pr){
  for(var i=0;i<hxs.length;i++){
   if(!hxs[i].tmpClass){
    hxs[i].tmpClass=hxs[i].className+=" ";
    boxsClass[i].tmpClass=boxsClass[i].className+=" ";
   }
   if(pr==i){
    hxs[i].className+=" up"; // 展开状态:标题
    boxsClass[i].className+=" up"; // 展开状态:容器
   }
   else {
    hxs[i].className=hxs[i].tmpClass;
    boxsClass[i].className=boxsClass[i].tmpClass;
   }
  }
 }
}
tab("tab01","h3","div","","onclick",2);
tab("tab02","h4","ol");
tab("tab03","h3","div","tab"); 
//-->
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
React中的refs的使用教程
Feb 13 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
JS实现网站吸顶条
Jan 08 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 #Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 #Javascript
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python实现排序算法解析
2018/09/08 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
情人节活动策划方案
2014/02/27 职场文书
数控机床专业自荐信
2014/05/19 职场文书
党代会心得体会
2014/09/04 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
公司转让协议书
2016/03/19 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python