CSS JS 滑动们问题 高手近
发布网友
发布时间：2022-05-12 16:10
我来回答
共3个回答
热心网友
时间：2022-04-24 13:49
<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;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_b6d924afad052649402dWs8adqAyLtgi.gif');
background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 用于控制显示与隐藏的css类 */
.normaltab {
background-image:url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif');
background-repeat: no-repeat;
color:#1F3A87 ;
}
.hovertab {
background-image: url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif');
background-repeat: no-repeat;
color:#1F3A87;
font-weight:bold
}
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
for(var i=1;i<=5;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 class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1)">
流行音乐</li>
<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
美女写真</li>
<li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
平面设计</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">流行音乐 的内容</div>
<div class="undis" id="tbc_02">美女写真 的内容</div>
<div class="undis" id="tbc_03">平面设计 的内容</div>
</div>
</div>
<hr author="#" size="1" noshade="noshade" style="color:#064ca1;margin-top:30px;" />
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_4" class="hovertab" onmouseover="d:HoverLi(4);">
沃尔沃</li>
<li id="tb_5" class="normaltab" onmouseover="b:HoverLi(5);">
风格</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_04">流额外 的内容</div>
<div class="undis" id="tbc_05">个人的内容</div>
</div>
</div>
</body>
</html>
热心网友
时间：2022-04-24 15:07
之前的HoverLi()函数逻辑有点问题改为如下就好了：
function HoverLi(n){
for(var i=1;i<=8;i++){
g('tb_'+i).className = (i==n)? 'hovertab' : 'normaltab';
g('tbc_0'+i).className=(i==n)? 'dis' : 'undis';
}
}
热心网友
时间：2022-04-24 16:42
cccccc
滑动门效果
滑动门效果是一种常见的网页设计效果，它可以为网站菜单增加一定的美观度和交互性。下面介绍如何使用CSS和JavaScript实现滑动门效果。一、HTML结构 首先，我们需要在HTML中创建一个菜单栏，这个菜单栏包含若干个选项卡，每个选项卡对应一个页面。具体结构如下：```选项卡1 选项卡2 选项卡3 选项卡4 ```...
网页高手来!滑动门代码怎么放进做了一半的网页里!
滑动门属于CSS代码 如果你COPY了代码，只需要把那代码放在与之间就可以了 另外 代码还需要一定的修改 才可以和你设计的网页连在一起
CSS 选项卡中的 Javascript滑动门 下面代码怎么看呢 一句都看不明白拜托...
var lis = document.getElementById("Tabs").getElementsByTagName("li"); //获取ID Tabs 下所有的LI var uls = document.getElementById("TabsCon").getElementsByTagName("ul");//获取ID TabsCon 下所有的UL var order = 0; //再没有执行函数ChangeTabs 这个的时候值为0 如果执行了 则值...
CSS或者JS制作滑动门效果,让网页进行平移。详细,最好带注释
先把下图左边那部分隐藏掉，然后，鼠标移动到导航的时候用：hover属性，把下图左边2级导航显示出来，OK效果搞定
这段滑动门的js应该怎么理解,可以说的详细一点,谢谢
这个滑动门是用浮动层实现的,当鼠标经过要高亮的项目之后,传入该li为obj,传入的id是包裹li所在的ul的元素的id,是固定的,利用循环将匹配到的li的class设为two1说明css中设置了two1的特殊样式,如果匹配不到说明鼠标不在ul上面,设置ul的class为hidden,也就是要"隐藏"这个ul ...
一段css tab选项卡的问题
内容容器是442px(width 440px + border 2px)滑动门的宽度是440px(219px + 219px + 2px）滑动门容器宽度是440px 把.main1box 的 width 改成438px 或者把 tabs1 和 .menu1box 的 width 都改成442px，并且把219改成220 都可以
div+css或加javascript如何实现点击上边按钮下边显示百度,谷歌等网站...
通过滑动门效果就可以实现;原理:载入的时候只显示1号层,隐藏2-N号层.当你点击按钮的时候,隐藏1号层,并显示相应的层;代码如下: 滑动门通用JS <!-- body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;} .bodyer{width:760px;margin:20px auto auto;border:...
DIV+CSS制作滑动门只有鼠标点他才出内容不点就不出
办公室装修效果图
css 导航条问题
楼主的这种导航好像叫做滑动门导航吧，导航宽度可以根据内容自适应。但是楼主的 html 关系嵌套的不太合适，CSS也不好操作，我推荐使用 #nav3，这也是从书上学的，代码虽长，但是嵌套关系与并列关系非常明确，各自负责的功能也很明确。楼主说的出现缝隙的问题只在 IE 6 中出现过，其他浏览器正常，这说明...
css高手(谁能给我一个鼠标滑过切换内容的代码)急急!
是滑动门效果么???<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS 选项卡 { padding:0px; margin:0px; font-size:12px} .m{ width:620px; margin:0 auto;} .xx{ width:500px; border:1...
