仿网易div+css滑动门选项卡效果

<!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>DIV+CSS仿网易的滑动门技术AJAX</title>
<style type="text/css">
<!--
#header {
 background-color: #F8F4EF;
 height: 200px;
 width: 400px;
 margin: 0px;
 padding: 0px;
 border: 1px solid #ECE1D5;
 font-family: "宋体";
 font-size: 12px;
}
#menu {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#menu li {
 display: block;
 width: 100px;
 text-align: center;
 float: left;
 margin: 0px;
 padding-top: 0.2em;
 padding-right: 0px;
 padding-bottom: 0.2em;
 padding-left: 0px;
 cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
 for(i=0;i<menu.childNodes.length;i++)
 menu.childNodes[i].className="sec1";
 menu.childNodes[n].className="sec2";
 
 for(i=0;i<main.childNodes.length;i++)
 main.childNodes[i].style.display="none";
 main.childNodes[n].style.display="block";
 
}
</script>
<div id="header">
  <ul id="menu">
    <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
    <li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
    <li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
    <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
  </ul>
  <!--内容显示区域-->
  <ul id="main">
    <li class="block">第一个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li>
    <li class="unblock">第二个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li>
    <li class="unblock">第三个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li>
    <li class="unblock">第四个内容,<a href="http://www.qpsh.com/">欢迎访问网页特效代码</a></li>
  </ul>
  <!--内容显示区域-->
</div>
</body>
</html>
 

时间： 2024-08-30 11:38:38

仿网易div+css滑动门选项卡效果的相关文章

DIV+CSS 滑动门技术的简单例子_经验交流

兼职实习 车辆买卖 同城活动 房屋租售 同城寻缘 跳蚤市场 个人服务 学习与培训培训

JS+CSS实现自动切换的网页滑动门菜单效果代码_javascript技巧

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

JS+CSS实现简易实用的滑动门菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希望这款滑动门大家能够喜欢,也希望研究JS的达人一同切磋,共同提高. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/ 具体代码如下: <html> <head> <t

CSS滑动门Sliding door实际应用代码详解

其实CSS滑动门这个概念早在几年前就已经出现了,只是近来年被提得比较多而已.但是常常有人把它跟选项卡效果混淆在一起,特别是一些新手朋友,所以我在这里写篇详解,希望能有所帮助. 说起来滑动门也不是什么高深的技术,也只是CSS的一种手法罢了.它是利用背景图像的交迭以及相互滑动来实现一些效果.最常见的就是圆角的导航了,我们可以把一左一右两个圆角背景想像成两扇可以滑动的门,他们可以滑到一起并交迭以显示较少的内容,也可以相互滑开以显示较多的内容,就如下图所示: 在以往的一些教程中,都喜欢把背景图切成一宽一

JS实现具备延时功能的滑动门菜单效果_javascript技巧

本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

CSS滑动门实例

兼容各浏览器的CSS滑动门实例,代码如下,可运行看效果.  css+div滑动门效果在网页上非常常见,应用范围很广泛,可以减少网页空间的占用,把相同的类别可以归类到一起,用CSS滑动门而实现效果.网上很多CSS+JS滑动门效果都不是很好, 要么太固定了,要么就是内容里面不能再插入DIV标签.这个版本是同事帮我改进的,用起来非常方便. css+div滑动门效果 (预览页面有两个例子,一个是点击触发事件,一个是鼠标滑过实现效果,onclick 和onmouseover 不同) [Ctrl+A 全部选

对css滑动门技术的一些总结和归纳

css 前些天加了一个设计群,里面一帮人都在嚷嚷要学css,但是不知道从哪里入手,于是我就在群里随便嘀咕了一句"哈哈,我是高手...." 结果引来骂声无数,虽然我心里不服,不过还是承认自己的css功底不够,除了布局/文字/链接这些简单的处理之外,其他的一些行为基本不会. 其中有个人说"如果你是高手,那你就详细介绍一下css滑动门技术",这句话把我刺激了,于是我连夜从网上搜罗了一些关于css滑动门技术的东西,并且自己做了一个滑动门,事实上在学习css滑动门技术之前,我

jquery实现标题字体变换的滑动门菜单效果_jquery

本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html

css滑动门菜单 兼容多浏览器

   代码如下 复制代码 <title>一款兼容性非常好的css滑动门菜单</title> <style type=text/css media=screen> <!-- *{font-size:12px;} ul{list-style-type:none; margin:0px;} .ttl{height:18px;} .ctt{height:auto;padding:6px;clear:both} .w936{width:100%;margin:2px 0;c