jscss滑动门代码,滑动门代码html

本文目录一览：

1、网页中的滑动门，用css的设置？
2、单纯使用CSS能实现滑动门效果？
3、DIV+CSS 滑动门
4、滑动门是怎么做的啊
5、css 滑动门菜单制作
6、同一页面出现多个滑动门效果，求高人解答

网页中的滑动门，用css的设置？

我这没有你说的只用样式控制的，我这只有js控制的我给你发一个你看看，我这还有几个，想要就给我发消息吧 " " 我的滑动门 body{color: #000;font-family: "宋体", arial;font-size: 12px;background: #fff;text-align: center;margin: 0;}.nTab{float: left;width: 432px;margin: 0 auto;border-bottom:1px #AACCEE solid;background:#d5d5d5;background-position:left;background-repeat:repeat-y;margin-bottom:2px;}.nTab .TabTitle{clear: both;height: 22px;overflow: hidden;}.nTab .TabTitle ul{border:0;margin:0;padding:0;}.nTab .TabTitle li{float: left;width: 70px;cursor: pointer;padding-top: 4px;padding-right: 0px;padding-left: 0px;padding-bottom: 2px;list-style-type: none;}.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}.nTab .TabContent{ width:auto;background:#fff;margin: 0px auto;padding:10px 0 0 0;border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;}.none {display:none;}.c{ clear:both;} function nTabs(thisObj,Num){if(thisObj.className == "active")return;var tabObj = thisObj.parentNode.id;var tabList = document.getElementById(tabObj).getElementsByTagName("li");for(i=0; i tabList.length; i++){ if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; }} } 选项卡0开始标题开始全部日志咨询相册商城社区内容开始 000 111 222 333 444 555 选项卡0结束选项卡1开始标题开始 aaa bbb ccc 单击内容开始 000 111 222 333 选项卡1结束

单纯使用CSS能实现滑动门效果？

可以的，纯css做滑动门有两种办法，一个利用hover伪类，另一种就是设置锚点。对应两种方式触发滑动门效果，鼠标悬浮和点击。

下面各举一例，

鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title纯CSS下拉菜单/title

style type="text/css"

font-size:12px;

text-decoration:none;

color:#000000;}

li ul{

display:none;

margin-left:5px;}

li:hover ul{

width:306px;

padding:20px;

height:250px;

display:block;

}

li:hover .fira{border-bottom:#FFFFFF 1px solid;

}#kpk{

position:relative;

width:420px;

}

#kpkli{

float:left;

list-style:none;

margin-right:20px;

}

#kpkli .fira{

border:1px #c6c6c6 solid;

}

.seca{

position:absolute;

z-index:1;

left:-5px;

top:23px;

border:1px #c6c6c6 solid;

height:250px;

width:306px;

padding:20px;

height:250px;

}

.fira{

width:70px;

display:block;

line-height:22px;

background-color:white;

text-align:center;

z-index:2;

}/style

/headbody

div

ul id="kpk"

a href="#" class="fira"首页/a

ul class="seca" rel="first"

liA href="#" target=_self1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河/A/li

liA href="#" target=_self2.首页最高法:承诺不判赖昌星死刑没有超越法律程序/A/li

liA href="#" target=_self3.首页物权法:满70年住宅建设用地使用权将自动续期/A/li

liA href="#" target=_self4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)/A/li

liA href="#" target=_self5.首页揭开郑州神枪手神秘面纱头号狙击手是近视眼/A/li

liA href="#" target=_self6.首页美军高官:不排除和中国发生直接军事对抗可能/A/li

liA href="#" target=_self7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕/A/li

liA href="#" target=_self8.首页西方炒作"中国航母威胁论"称05年已正式服役/A/li

liA href="#" target=_self9.首页女孩生活无法自理请人大代表递交安乐死议案/A/li

liA href="#" target=_self10.首页建设部：住房公积金制度将覆盖农民工/A/li

/ul

!--ul

li11/li

li12/li

li13/li

/ul--

/li

a href="#" class="fira"链接一/a

ul class="seca"

liA href="#" target=_self1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河/A/li

liA href="#" target=_self2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序/A/li

liA href="#" target=_self3.链接一物权法:满70年住宅建设用地使用权将自动续期/A/li

liA href="#" target=_self4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)/A/li

liA href="#" target=_self5.链接一揭开郑州神枪手神秘面纱头号狙击手是近视眼/A/li

liA href="#" target=_self6.链接一美军高官:不排除和中国发生直接军事对抗可能/A/li

liA href="#" target=_self7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕/A/li

liA href="#" target=_self8.链接一西方炒作"中国航母威胁论"称05年已正式服役/A/li

liA href="#" target=_self9.链接一女孩生活无法自理请人大代表递交安乐死议案/A/li

liA href="#" target=_self10.链接一建设部：住房公积金制度将覆盖农民工/A/li

/ul

!--ul

li21/li

li22/li

li23/li

/ul--

/li

a href="#" class="fira"链接二/a

ul class="seca"

liA href="#" target=_self1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河/A/li

liA href="#" target=_self2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序/A/li

liA href="#" target=_self3.链接二物权法:满70年住宅建设用地使用权将自动续期/A/li

liA href="#" target=_self4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)/A/li

liA href="#" target=_self5.链接二揭开郑州神枪手神秘面纱头号狙击手是近视眼/A/li

liA href="#" target=_self6.链接二美军高官:不排除和中国发生直接军事对抗可能/A/li

liA href="#" target=_self7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕/A/li

liA href="#" target=_self8.链接二西方炒作"中国航母威胁论"称05年已正式服役/A/li

liA href="#" target=_self9.链接二女孩生活无法自理请人大代表递交安乐死议案/A/li

liA href="#" target=_self10.链接二建设部：住房公积金制度将覆盖农民工/A/li

/ul

!--ul

li31/li

li32/li

li33/li

/ul--

/li

a href="#" class="fira"链接三/a

ul class="seca"

liA href="#" target=_self1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河/A/li

liA href="#" target=_self2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序/A/li

liA href="#" target=_self3.链接三物权法:满70年住宅建设用地使用权将自动续期/A/li

liA href="#" target=_self4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)/A/li

liA href="#" target=_self5.链接三揭开郑州神枪手神秘面纱头号狙击手是近视眼/A/li

liA href="#" target=_self6.链接三美军高官:不排除和中国发生直接军事对抗可能/A/li

liA href="#" target=_self7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕/A/li

liA href="#" target=_self8.链接三西方炒作"中国航母威胁论"称05年已正式服役/A/li

liA href="#" target=_self9.链接三女孩生活无法自理请人大代表递交安乐死议案/A/li

liA href="#" target=_self10.链接三建设部：住房公积金制度将覆盖农民工/A/li

/ul

!--ul

li41/li

li42/li

li43/li

/ul--

/li

/ul

/div

/body

/html

锚点点击例：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

html

head

title左右布局/title

style type="text/css"

#nav{

width:303px;

height:200px;

border:1px solid #CCCCCC;

}

#column a {

float:left;

width:100px;

border-right:1px solid #CCC;

border-bottom:1px solid #CCC;

font:bold 14px/30px Arial, Helvetica, sans-serif;

color:#000;

text-decoration:none;

text-align:center;

}

#contant {

width:303px;

height:162px;

overflow:hidden;

}

ul {

margin:0;

padding:0;

list-style-type:none;

padding:4px 0 0 5px;

}

li {

font-size:12px;

overflow:hidden;

padding-left:2px;

line-height:27px;

}

/style

/head

body

div id="nav"

div id="column" a href="#localnew"本地新闻/a a href="#innernew"国内新闻/a a href="#enterment" 娱乐新闻/a /div

div id="contant"

ul id="localnew"

lia href="#"我喜欢CSS /a/li

lia href="#"我喜欢CSS/a/li

/ul

ul id="innernew"

lia href="#"我喜欢编程/a/li

lia href="#"我喜欢编程 /a/li

lia href="#"我喜欢编程/a/li

/ul

ul id="enterment"

lia href="#"我喜欢美工/a/li

lia href="#"我喜欢美工 /a/li

lia href="#"我喜欢美工/a/li

/ul

/div

/body

/html

楼主自行copy代码到本地查看，样式微调。。。

DIV+CSS 滑动门

DIV+CSS滑动门技术简介滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“li class="sd02" id="m05"滑动门/li”、“div id="c05" class="hidden" 第五层内容 /div”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。DIV+CSS中的滑动门技术美观的工艺，真正灵活的接口组件，并根据文本自适应大小，我们可用两个独立的背景图像来创造它。一个在左边，一个在右边。把这两幅图像想象成两扇可滑动的门，它们滑到一起并交迭，占据一个较窄的空间；或者相互滑开，占据一个较宽的空间，就像下图所显示的那样：这就是使用了DIV+CSS滑动门技术，在这个模型中,一个图像掩盖住另一个图片的一部分。假设我们放置一些独特的内容在每个图像的周围，例如标签的圆角，我们并不希望上面一副图像完全的遮蔽住下面一副。为了防止这种情况的发生，我们可以将上面一副图像（此例中的左边那幅）控制的尽可能的窄。但仍然要保证一定的宽度来显现标签一侧的独特性。如果外部是圆角，我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。如果目标在大小上增长，并超过了以上所显示的宽度，归咎于文本大小及字体的改变，图像会被拉开，产生不美观的间隙。我们需要判断的是，预测这种可扩展的量将有多大。如果在浏览器中改变字体的大小，目标又会如果增长呢？实际来说，我们至少应该估算到字体大小增长至300%的情况。背景图像也得适应这种增长。对于以上的例子，我们将下面（即右边）的图像设为400*150像素，上面的设为9*150像素。在头脑中，始终要有这样的认识：背景图像只是显示一个可供内容填充的有效空间（即内容区域和padding，称为doorway）。这两幅图像始终和各自外部的边角相锚定。背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间（doorway）：如果标签被撑大，图像即滑开，doorway变宽，图像的也将被显露的更多：此例中，我在photoshop中制作两个平滑，细的3D标签图像，如文章开头所显示的那样。对于其一，内部明亮，边框暗淡些，用来表现当前选中的标签。将这种技巧模型应用于左右两幅图像中，我们需要扩大标签图像覆盖的区域，将它裁剪成两部分：

同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像（1, 2, 3, 4），我们就可以开始用标记和CSS来制作我们的标签了，对DIV+CSS滑动门技术就简单介绍到这里，请关注本文的其他相关报道。

滑动门是怎么做的啊

滑动门可以用javascript来制作，其代码如下所示：

html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}

ul{list-style-type:none; margin:0px;}

.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}

.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}

/*tab切换效果*/

.tb_{滑动门背景}

.tb_ ul{height:24px;}

.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

/*用于控制显示与隐藏的css类*/

.normaltab{选中的滑动门标签背景}

.hovertab{未选中的滑动门标签背景}

.dis{display:block;}

.undis{display:none;}

/style

script type="text/javascript" language="javascript"

//!cdata[

function g(o){return document.getElementbyId(o);}

function HoverLi(n){

//如果有N个标签，就将i=N;

for(var i=1;i=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';

}

//如果要做成点击后再转到请将li中的onmouseover改成onclick;

//]]

/script

/head

body

!--把下面代码加到body与/body之间--

div class="w936"

div id="tb_" class="tb_"

li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);"

标题1/li

li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);"

标题2/li

li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);"

标题3/li

/ul

/div

div class="ctt"

div class="dis" id="tbc_01"内容1/div

div class="undis" id="tbc_02"内容2/div

div class="undis" id="tbc_03"内容3/div

/div

滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。网页制作中，很多时候需要充分利用空间。这时候需要使用滑动门这种简单而实用的技术。

css 滑动门菜单制作

!doctype html

html

head

meta http-equiv="Content-Type" content="text/html; charset=gbk" /

title滑动门/title

style

!--

* {

margin:0;

padding:0;

font-size:12px;

}

body {

padding:30px;

}

.tabsBox {

width:400px;

margin:20px auto;

}

.tabs {

height:20px;

}

.tabs li {

width:80px; text-align:center;

padding-top:2px;

line-height:18px;

float:left;

background-color:#ccc;

margin-right:5px;

list-style:none;

position:relative;

cursor:pointer;

color:#333;

}

.tabs li span {

display:none;

}

.tabs .cur {

background-color:#f0f0f0;

}

.tabs .cur span {

display:block;

width:1px;

height:1px;

border:solid 8px;

border-color:#f0f0f0 #fff #fff #fff;

position:absolute;

top:20px;

left:32px;

overflow:hidden;

z-index:-1;

}

.cons {

height:120px;

padding:8px 12px;

overflow:hidden;

border:1px solid #f0f0f0;

position:relative;

z-index:1;

}

.cons ul li {

list-style:none;

line-height:20px;

}

.hidden {

display:none;

}

.block {

display:block;

}

/style

/head

body

div class="tabsBox"

ul id="Tabs" class="tabs"

li class="cur"最新更新span/span/li

li推荐下载span/span/li

li下载排行span/span/li

li本月排行span/span/li

/ul

div id="TabsCon" class="cons"

lia href="/soft/4764.shtml" target="_blank"基于JavaScript的气泡提示网页版/a/li

lia href="/soft/8021.shtml" target="_blank"C#调用OFFICE组件生成Excel表格示例/a/li

lia href="/soft/9011.shtml" target="_blank"iFrame 框架在多页面间相互传值的实例/a/li

lia href="/soft/1658.shtml" target="_blank"高亮显示代码的在线编辑器ASP.NET版/a/li

lia href="/soft/1852.shtml" target="_blank"《Java2核心技术卷2:高级特性》第7版中文高清 PDF/a/li

lia href="/soft/1361.shtml" target="_blank"VB餐厅POS收银软件/a/li

/ul

lia href="/soft/1361.shtml" target="_blank"VB餐厅POS收银软件/a/li

lia href="/soft/3855.shtml" target="_blank"VB 6.0 简体中文标准版/a/li

lia href="/soft/8467.shtml" target="_blank"Delphi加密隐藏或还原Windows盘符驱动器/a/li

lia href="/soft/5238.shtml" target="_blank"ImageVue 2.0 PHP+FLASH+XML高级相册/a/li

lia href="/soft/7667.shtml" target="_blank"VB商品零售进销存程序含MSSQL数据库文件/a/li

/ul

lia href="/jscss/code/1915.shtml" target="_blank"jQuery 模块拖动，拖动层效果，可淡入淡出/a/li

lia href="/jscss/code/1914.shtml" target="_blank"jQuery单行新闻滚动/a/li

lia href="/jscss/code/1913.shtml" target="_blank"经典的jQuery多行文本滚动/a/li

lia href="/jscss/code/1912.shtml" target="_blank"JS图片切换学习版，没有过多修饰/a/li

lia href="/jscss/code/1911.shtml" target="_blank"漂浮广告代码，Js演示/a/li

lia href="/jscss/code/1910.shtml" target="_blank"边滚边停的JS图片滚动/a/li

/ul

lia href="/soft/9217.shtml" target="_blank"递归读取数据库创建树控菜单的Delphi例子/a/li

lia href="/soft/9199.shtml" target="_blank"VB抓取DLL或EXE应用程序内的图标资源/a/li

lia href="/soft/9236.shtml" target="_blank"jQuery StartStopSlider 滚动切换插件/a/li

lia href="/soft/9235.shtml" target="_blank"jQuery EasyUI 实例演示（菜单、TAB等）/a/li

lia href="/soft/9227.shtml" target="_blank"VB+SQL2000考试卷（题库）生成与管理系统/a/li

/ul

/div

script

!--

var lis = document.getElementByIdx_x("Tabs").getElementsByTagName_r("li");

var uls = document.getElementByIdx_x("TabsCon").getElementsByTagName_r("ul");

var order = 0;

for(var i=0; ilis.length; i++){

lis[i].value = i;

lis[i].onmouseover = function(){

ChangeTabs(this.value);

};

uls[i].className = "hidden";

}

lis[order].className = "cur";

uls[order].className = "block";

function ChangeTabs(nowTab){

lis[order].className = "";

uls[order].className = "hidden";

order = nowTab

lis[nowTab].className = "cur";

uls[nowTab].className = "block";

}

/script

/body

/html

同一页面出现多个滑动门效果，求高人解答

html

head

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

script language="javascript"

function tabChange(obj,id)

{

var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组

var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组

for(i=0;iarrayul.length;i++)

{

if(obj==arrayli[i])

{

arrayli[i].className = "cli";

arrayul[i].className = "";

}

else

{

arrayli[i].className = "";

arrayul[i].className = "hidden";

}

/script

style type="text/css"

.tabbox {width:300px;height:250px;}

.tabmenu {width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}

.tabmenu ul {margin:0;padding:0;list-style-type: none;}

.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}

.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}

#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}

#tabcontent ul {margin:0;padding:5px;list-style-type: none;}

#tabcontent .hidden {display:none;}

/*第二个滑动门样式*/

#tabcontent1 {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}

#tabcontent1 ul {margin:0;padding:5px;list-style-type: none;}

#tabcontent1 .hidden {display:none;}

/*第三个滑动门样式*/

#tabcontent2 {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}

#tabcontent2 ul {margin:0;padding:5px;list-style-type: none;}

#tabcontent2 .hidden {display:none;}

/style

/head

body

div class="tabbox"

div class="tabmenu"

li onmouseover="tabChange(this,'tabcontent')" class="cli"军事/li

li onmouseover="tabChange(this,'tabcontent')"娱乐/li

li onmouseover="tabChange(this,'tabcontent')"国内/li

/ul

/div

div id="tabcontent"

ul name="tabul"

lia href="#"1111111111111111111111/a/li

/ul

ul class="hidden"

lia href="#"2222222222222222222222/a/li

/ul

ul class="hidden"

lia href="#"3333333333333333333333/a/li

/ul

/div

!--第二个滑动门 --

div class="tabbox"

div class="tabmenu"

li onmouseover="tabChange(this,'tabcontent1')" class="cli"军事/li!--修改onmouseover参数'tabcontent1',与下面div的id名称一样 --

li onmouseover="tabChange(this,'tabcontent1')"娱乐/li

li onmouseover="tabChange(this,'tabcontent1')"国内/li

/ul

/div

div id="tabcontent1"

ul name="tabul"

lia href="#"1111111111111111111111/a/li

/ul

ul class="hidden"

lia href="#"2222222222222222222222/a/li

/ul

ul class="hidden"

lia href="#"3333333333333333333333/a/li

/ul

/div

!--第三个滑动门 --

div class="tabbox"

div class="tabmenu"

li onmouseover="tabChange(this,'tabcontent2')" class="cli"军事/li

li onmouseover="tabChange(this,'tabcontent2')"娱乐/li

li onmouseover="tabChange(this,'tabcontent2')"国内/li

/ul

/div

div id="tabcontent2"

ul name="tabul"

lia href="#"1111111111111111111111/a/li

/ul

ul class="hidden"

lia href="#"2222222222222222222222/a/li

/ul

ul class="hidden"

lia href="#"3333333333333333333333/a/li

/ul

/div

/body

/html