<!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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none}
body{ font-size:12px}
#tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;}
#tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center}
#tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none}
#tabMenus li.current{background:#fff}
#tabMenus li.usual{background:#ccc;}
#tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none}
#tabCons .con{ float:left; padding:10px; width:380px; display:none}
</style>
<script>
function tab(menus,cons,openClass,closeClass,speed){
   var count = menus.length; //选项的个数。
   var now=1;                //记录当前滑过的选项。
   var timer=null;           //
  
   var clearOpenClass = function(){//清除滑过样式。
   for(var i = 0 ; i < count; i++)
                  {
   menus[i].className = closeClass;                                         
                    cons[i].style.display = "none";
                  }
   };
  
   var changeTab = function(v){//添加滑过样式以及内容切换。
                  clearOpenClass();
menus[v].className = openClass;
cons[v].style.display = "block";
now= v+1;
   };

var autoChange = function (){//自动切换
     if(now<count){
changeTab(now);
}else{
now = 0;
changeTab(now);
     }
    };

var setAuto = function (){timer = setInterval(autoChange, speed)};
        var clearAuto = function (){clearInterval(timer)};

this.init = function(){//初始化。
              if(menus.length != cons.length){ return;}
              clearOpenClass();
      for(var i = 0 ; i < count; i++){
         menus[i].value = i;                             
                  }
menus[0].className='current';
       cons[0].style.display = "block";
   };
  
   this.autoAction = function(){//自动切换时的动作。
           setAuto();
     for(var i = 0 ; i < count; i++){                            
                     menus[i].onmouseover = function(){clearAuto();changeTab(this.value);};
                 menus[i].onmouseout = function(){setAuto();};
}
       };
  
   this.usualAction = function(){//普通切换时的动作。
     for(var i = 0 ; i < count; i++){                            
                     menus[i].onmouseover = function(){changeTab(this.value);};
}
       };

};
tab.prototype = {
       usual : function(){
   this.init();
   this.usualAction();                            
       },
   auto : function(){
   this.init();
   this.autoAction();                           
   }
         
}
function $(id){return document.getElementById(id);}
window.onload=function(){
var menus=$('tabMenus').getElementsByTagName('li');
var cons=$('tabCons').getElementsByTagName('div');
var t=new tab(menus,cons,'current','usual',2000);
t.auto();
}
</script>
</head>
<body>
<ul id="tabMenus">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
<div id="tabCons">
<div class="con">1111</div>
<div class="con">2222</div>
<div class="con">3333</div>
<div class="con">4444</div>
</div>

</body>
</html>
把这代码复制放到文本中。然后保存成.html格式。在浏览器中打开即可看效果!

DIV+CSS滑动门效果的更多相关文章

  1. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  2. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. CSS 滑动门案例

    一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...

  4. CSS - 滑动门技术

    1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...

  5. CSS——滑动门技术及应用

    先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...

  6. CSS——滑动门

    在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...

  7. CSS滑动门

    如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...

  8. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

  9. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

随机推荐

  1. PostgreSQL and bloat

    The bucardo project has released its nagios plugins for PostgreSQL and we can extract from them this ...

  2. 万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！

    转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11     ...

  3. 查看jquery绑定的事件函数

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...

  4. Visual Studio 文件没发布出来

    解决办法是选择文件打开属性窗口找到生成操作,选项选择"内容",重新发布,OK,问题解决.

  5. 虚拟化之xenserver

    安装XenServer系统的硬盘大小为1T,自身存放10来个虚拟硬盘为50G的虚拟机不成问题.但在实际应用中,由于通过nfs等方式使用异地存储, 本地硬盘用作存放虚拟机的元数据,因此安装XenServ ...

  6. wikioi 1474 十进制转m进制

    /*===================================== 1474 十进制转m进制 题目描述 Description 将十进制数n转换成m进制数 m<=16 n<=1 ...

  7. charles proxy

    charles proxy  一个比较好用的代理工具,可以进行数据的移动,以及pc 数据的抓包.

  8. LINUX系统下PHP显示空白页

    因为手工转移,文件所属用户及用户组是root,所以需要把网站程序及数据库都改成对应用户组:如www和mysql. 更改目录所属用户执行命令: chown -R 用户.用户组 目录名, 如:chown ...

  9. 【转】VS2012程序打包部署详解

    上篇博客把收费系统的总体设计进行了一遍讲解,讲解的同时掺杂了些有关.NET编译机制的总结.程序编写测试完成后接下来我们要做的是打包部署程序,但VS2012让人心痛的是没有了打包工具.不知道出于什么原因 ...

  10. java单例模式和双例模式

    今天朋友找我给做道题,双例模式,我是没听说过,都说是单例模式和多例模式, 也不知道双例模式什么时候用,就简单写了一个案例,不知道对不对,个人感觉蛮对的,双例就是单例+单例,废话不说了!!!! /* * ...