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代码
Oct 09 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
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
PHP 模拟$_PUT实现代码
2010/03/15 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript时间差插件分享
2016/07/18 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
2015年幼儿园毕业感言
2014/02/12 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
初中军训感想
2015/08/07 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏