`

一款代码很少的Css+JS滑动门

阅读更多
<!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 media="screen" type="text/css"> 
<!-- 
*{font-size:12px;} 
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} 
UL{list-style-type:none; margin:0px;} 
/* 标准盒模型 */ 
.ttl{height:18px;} 
.ctt{
 height:auto;
 padding:6px;
 float: right;
 width: 680px;
} 
.w936{
 width:288px;
 border:1px solid skyblue;
 margin-top: 2px;
 margin-right: 0;
 margin-bottom: 2px;
 margin-left: 0;
 float: left;
}


/* TAB 切换效果 */ 
.tb_{background-color: #E6F2FF; background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;} 
.tb_ ul{height:24px;} 
.tb_ li{float:left;height: 24px;padding-top: 6px;width: 288px;cursor:pointer;} 
.normaltab    { background-repeat: no-repeat; color:#1F3A87 ;} 
.hovertab     { background-repeat: no-repeat; color:#1F3A87; font-weight:bold } 
.dis{display:block;} 
.undis{display:none;}
#Layer1 {
 position:absolute;
 left:232px;
 top:82px;
 width:145px;
 height:85px;
 z-index:1;
}
#aaaaaa {
 height: 100px;
 width: 100px;
 position: absolute;
 left: 393px;
 top: 16px;
}

--> 
</style> 
<script type="text/javascript" language="javascript"> 
<!-- 
function g(o){return document.getElementById(o);} 
function HoverLi(n){ 
//如果有N个标签,就将i<=N; 
for(var i=1;i<=6;i++){
 g('tb_'+i).className='normaltab';
 g('tbc_0'+i).className='undis';
 }
 g('tbc_0'+n).className='dis';
 g('tb_'+n).className='hovertab'; 
} 
//--> 
</script> 
</head>

<body>

<div id="aaaaaa"><img src="skin-bg.gif" width="213" height="105" /></div>
<div class="w936"> 
     <div id="tb_" class="tb_"> 
             <ul> 
                 <li id="tb_1" class="hovertab" onclick ="xgz:HoverLi(1);">网上房展会</li> 
                 <li id="tb_2" class="normaltab" onclick="xgz:HoverLi(2);">本月开盘</li> 
                 <li id="tb_3" class="normaltab" onclick="xgz:HoverLi(3);">知名开发商</li> 
                 <li id="tb_4" class="normaltab" onclick="xgz:HoverLi(4);">栏目导航</li> 
                 <li id="tb_5" class="normaltab" onclick="xgz:HoverLi(5);">哈哈哈哈</li> 
                 <li id="tb_6" class="normaltab" onclick="xgz:HoverLi(6);">Q小鸽子</li> 
             </ul> 
     </div>

</div> <div class="ctt"> 
         <div class="dis" id="tbc_01">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div> 
         <div class="undis" id="tbc_02">内容2</div> 
         <div class="undis" id="tbc_03">内容3</div> 
         <div class="undis" id="tbc_04">内容4</div> 
         <div class="undis" id="tbc_05">内容5</div> 
         <div class="undis" id="tbc_06">内容6 [Q小鸽子]</div> 
     </div> 
</body> 
</html>

 

原文链接:http://hi.baidu.com/fuyangxw/blog/item/ca26523e293c802b70cf6c18.html

分享到:
评论

相关推荐

    css+js滑动门小实用小实例

    "css+js滑动门小实用小实例"是一个集合,包含三个利用CSS和JavaScript技术构建的实用小示例,旨在展示如何创建美观且功能性的滑动门效果。滑动门效果通常用于导航菜单或者图像展示,它允许用户通过鼠标悬停或点击来...

    html+css+js学习代码.zip

    html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码...

    html+css+JavaScript的学习代码.zip

    html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的...

    HTML+CSS+JS的爱心代码.zip

    HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码....

    JS+CSS滑动门代码

    JavaScript(JS)与CSS是构建网页动态效果和样式的核心技术,滑动门(Sliding Doors)是一种常见的前端设计技巧,常用于制作按钮、导航菜单等元素。这种技术利用CSS的背景定位和JavaScript的事件处理来实现元素的...

    HTML+CSS+JS精品网页模板源码153.rar

    HTML+CSS+JS精品网页模板,设置导航条、轮翻效果,鼠标滑动效果,自动弹窗,点击事件、链接等功能;适用于大学生期末大作业或公司网页制作。响应式网页,可以根据不同的设备屏幕大小自动调整页面布局; 支持如...

    个人博客html+css+JavaScript完整代码

    在构建一个个人博客时,HTML、CSS和JavaScript是三个核心组成部分。HTML负责网站的基本结构,CSS则用于美化页面样式,而JavaScript则为交互性提供动力。以下是对这些知识点的详细说明: **HTML(HyperText Markup ...

    HTML+CSS+JS的前端学习代码示例

    HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的前端学习代码示例;HTML+CSS+JS的...

    《html+css+javascript 网页制作案例教程》源代码

    《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材,旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现,提供了丰富的实践材料,使学习者能够通过实际...

    基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip

    基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...

    html+css+js网页设计源代码.zip

    在这个"html+css+js网页设计源代码.zip"中,`catcatcat-master`可能是一个项目目录,暗示着这个网页设计是以猫为主题。HTML文件通常会包含各种元素,如`&lt;head&gt;`(头部信息)、`&lt;body&gt;`(主体内容)、`&lt;header&gt;`...

    简单登录注册界面模板(HTML+CSS+JavaScript)【登录注册界面代码】

    简单登录注册界面模板(HTML+CSS+JavaScript)【登录注册界面代码】 简单登录注册界面模板(HTML+CSS+JavaScript)。简单登录注册界面模板(HTML+CSS+JavaScript)。简单登录注册界面模板(HTML+CSS+JavaScript)。 ...

    web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码

    web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...

    CSS+JS滑动门式的图片轮番切换.rar_HTML图片轮番切换_网页 图片轮播

    "CSS+JS滑动门式的图片轮番切换"是这种技术的一个实例,它结合了CSS(层叠样式表)和JavaScript两种前端技术来实现动态的图片展示。下面将详细讲解这一技术及其相关知识点。 首先,CSS在其中主要负责样式设计和布局...

    web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码

    web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...

    基于html+css+js实现的模仿华为商城静态网页源码+项目说明(附静态网页效果链接).zip

    基于html+css+js实现的模仿华为商城静态网页源码+项目说明(附静态网页效果链接).zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...

    个人网页的全部代码和图片HTML+CSS+JS的web个人网页.zip

    个人网页的全部代码和图片HTML+CSS+JS的web个人网页.zip直接运行index.html文件即可 个人网页的全部代码和图片HTML+CSS+JS的web个人网页.zip直接运行index.html文件即可 个人网页的全部代码和图片HTML+CSS+JS的web...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》源代码.zip

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》是一部深入浅出的教材,旨在教授读者如何构建和设计互动式的网页。这份源代码压缩包包含的文件是教材中的实例和练习,帮助学习者通过实践来掌握这三种核心技术。...

    Html+Css+Javascript从入门到精通.pdf

    《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识,并通过实践逐步深入理解HTML、CSS以及JavaScript这三种核心技术。以下是根据该书内容整理出的...

    地方旅游主题网页html+css+js 共12页

    【标题】"地方旅游主题网页html+css+js 共12页" 是一个综合性的网页设计项目,它涵盖了HTML、CSS和JavaScript这三种核心技术,用于构建一套完整的旅游主题网站。这个项目包含12个不同的页面,每个页面可能对应着网站...

Global site tag (gtag.js) - Google Analytics