JS实现自动变换的菜单效果代码


Posted in Javascript onSeptember 09, 2015

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

这是一款自动变换的JS菜单,由原来的一款自动TAB修改而成的,有需要的就拿去,代码内有几个JS函数,分别用来控制TAB的自动切换。

运行效果截图如下:

JS实现自动变换的菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body, div, ul, li {padding:0;text-align:center;}
body {font:12px "宋体";text-align:center;}
a:link {color:#00F;text-decoration:none;}
a:visited {color: #00F;text-decoration:none;}
a:hover {color: #c00;text-decoration:underline;}
ul {list-style:none;}
/*选项卡1*/
#Tab1 {width:900px;margin:0px;padding:0px;margin:0 auto;}
/*菜单class*/
.Menubox {width:100%;background:url();height:28px;line-height:28px;}
.Menubox ul {margin:0px;padding:0px;}
.Menubox li {float:left;display:block;cursor:pointer;width:114px;text-align:center;color:#949694;font-weight:bold;}
.Menubox li.hover {padding:0px;background:#fff;width:116px;border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url
();color:#739242;font-weight:bold;height:27px;line-height:27px;}
.Contentbox {clear:both;margin-top:0px;border:1px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;}
-->
</style>
</head>
<body>
<br>
<br>
<div id="Tab1">
 <div class="Menubox">
  <ul>
   <li id="one0" onmouseover="setTab('one',0,7)" class="hover">新闻1</li>
   <li id="one1" onmouseover="setTab('one',1,7)" >新闻2</li>
   <li id="one2" onmouseover="setTab('one',2,7)">新闻3</li>
   <li id="one3" onmouseover="setTab('one',3,7)">新闻4</li>
   <li id="one4" onmouseover="setTab('one',4,7)">新闻5</li>
   <li id="one5" onmouseover="setTab('one',5,7)">新闻6</li>
   <li id="one6" onmouseover="setTab('one',6,7)">新闻7</li>
  </ul>
 </div>
</div>
<br>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
var index;
function setTab(name,cursel,n){
 for(var i=0;i<n;i++){
  var menu=document.getElementById(name+i);
  menu.className=i==cursel?"hover":"";
   if (menu.className=="hover")
     index=i;
 }
} 
var num=0;
var AutoPlayObj=null;
function d()
{
  setTab('one',num%7,7); 
  num++;
}
function AutoPlay()
{
  clearInterval(AutoPlayObj);
  AutoPlayObj=setInterval('d()',1000)
};
AutoPlay();
var tab1 = document.getElementById("Tab1");
tab1.onmouseover = function (){
num=index;
clearInterval(AutoPlayObj);
}
tab1.onmouseout = function(){AutoPlay();}
//-->
</script>
</body>
</html>

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

Javascript 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 #Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
谈谈impress.js初步理解
Sep 09 #Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
JavaScript中实现Map的示例代码
Sep 09 #Javascript
You might like
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
Express.JS使用详解
2014/07/17 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
python下载微信公众号相关文章
2019/02/26 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python exit出错原因整理
2020/08/31 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
经典安踏广告词
2014/03/21 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
投标承诺函格式
2015/01/21 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
一起来学习Python的元组和列表
2022/03/13 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript