网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 菜单导航 >> 正文
最新文章
· JS版无限级网页折叠菜单,类似于树形
· CSS实现4级的下拉菜单
· 简洁的滑动门菜单
· jQuery带动画效果的多级下拉菜单
· 自动切换的JS菜单
· 隔指定时间选项卡自动切换
· CSS+JS实现兼容性很好的无限级下拉菜
· 自动切换的选项卡
· 仿163网盘网站的Js折叠菜单
· 随鼠标移过动态放大的菜单导航
热门文章
 自动固定在网页顶部的悬浮菜单栏
 仿天涯固定在网页顶部的导航条
 仿淘宝商城商品属性选择效果
 无限级CSS树形菜单 Ltree Ver2.0
 二级树形菜单CSS TreeMenu
 同一页面多种Tab及滑动门应用的综合
 仿淘宝网导航的选项卡效果
 自动切换的JS菜单
 适用于网站后台的竖向二级下拉导航
 政府网站常用的蓝色二级导航菜单
相关文章
自动切换的JS菜单
自动切换的选项卡
仿腾讯迷你首页选项卡清爽无修饰版
带缩略图和左右箭头自动切换的图片展示效
同一页面多种Tab及滑动门应用的综合实例
基于jQuery淡入淡出可自动切换的幻灯插件
不带三角图片却有三角效果的选项卡
遮罩过渡效果的图片幻灯和选项卡菜单
横向和竖向联动的选项卡菜单
简单实用的选项卡效果
仿淘宝网导航的选项卡效果
隔指定时间选项卡自动切换
来源:cssrain 更新时间:2011/10/3 2:30:53 阅读次数: 我要投稿
☉预览 ↓下载 #复制 +收藏
特效代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Semiall.com</title>

<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="index_yp">
  <!--yp1 start-->
    <div id="yp_card1" style="display:block">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(1,1)" onmouseout="hi()" class="yp_card_0">推荐</div>
        <div onmouseover="changeMc(1,2)" onmouseout="hi()" class="yp_card_3">生产</div>
        <div onmouseover="changeMc(1,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
        <div onmouseover="changeMc(1,4)" onmouseout="hi()" class="yp_card_3">服务</div>
        <div onmouseover="changeMc(1,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(1,1)" onmouseout="hi()" class="index_yp_main">推荐(循环周期(1秒))</div>
    </div>
  <!--end-->
  <!--yp2 start-->
    <div id="yp_card2" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(2,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(2,2)" onmouseout="hi()" class="yp_card_2" >生产</div>
        <div onmouseover="changeMc(2,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
        <div onmouseover="changeMc(2,4)" onmouseout="hi()" class="yp_card_3">服务</div>
        <div onmouseover="changeMc(2,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(2,2)" onmouseout="hi()" class="index_yp_main">生产(循环周期(1秒))</div>
    </div>
  <!--end-->
  <!--yp3 start-->
    <div id="yp_card3" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(3,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(3,2)" onmouseout="hi()"class="yp_card_6">生产</div>
        <div onmouseover="changeMc(3,3)" onmouseout="hi()" class="yp_card_2">贸易</div>
        <div onmouseover="changeMc(3,4)" onmouseout="hi()" class="yp_card_3">服务</div>
        <div onmouseover="changeMc(3,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(3,3)" onmouseout="hi()" class="index_yp_main">贸易(循环周期(1秒))</div>
    </div>
  <!--end-->
  <!--yp4 start-->
    <div id="yp_card4" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(4,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(4,2)" onmouseout="hi()" class="yp_card_6">生产</div>
        <div onmouseover="changeMc(4,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
        <div onmouseover="changeMc(4,4)" onmouseout="hi()" class="yp_card_2">服务</div>
        <div onmouseover="changeMc(4,5)" onmouseout="hi()" class="yp_card_5">综合</div>
      </div>
      <div onmouseover="changeMc(4,4)" onmouseout="hi()" class="index_yp_main">服务(循环周期(1秒))</div>
    </div>
  <!--end-->
  <!--yp5 start-->
    <div id="yp_card5" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="changeMc(5,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
        <div onmouseover="changeMc(5,2)" onmouseout="hi()" class="yp_card_6">生产</div>
        <div onmouseover="changeMc(5,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
        <div onmouseover="changeMc(5,4)" onmouseout="hi()" class="yp_card_6">服务</div>
        <div onmouseover="changeMc(5,5)" onmouseout="hi()" class="yp_card_4">综合</div>
      </div>
      <div onmouseover="changeMc(5,5)" onmouseout="hi()" class="index_yp_main">综合(循环周期(1秒))</div>
    </div>
  <!--end-->
</div>
<script language="javascript" type="text/javascript">
<!--
var s=5;
var t=1000;//循环周期(1秒)
var timer;
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
 clearTimeout(timer);
 if (x!=y){
 document.getElementById('yp_card'+x).style.display = "none";
 document.getElementById('yp_card'+y).style.display = "block";
 s=y
 }
}
function hi(){
timer=setTimeout("sh()",t)
}
function sh(){
 s=(s>=5)?1:s+1
 for (var i=1;i<=5;i++){
  document.getElementById("yp_card"+i).style.display = "none";
 }
 document.getElementById("yp_card"+s).style.display = "block"
 timer=setTimeout("sh()",t)
}
sh()
 -->
</script>
</body>
</html>

☉预览 ↓下载 #复制 +收藏
特效说明:

  每隔一秒选项卡会自动切换到下一个,到头后自动返回从第一个再切换。当然时间你可以重新指定。在IE6、FF下测试通过。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号