我写的这个JavaScript程序代码叫什么，算滑动门吗？

答案:2 悬赏:50 手机版

解决时间 2021-04-26 14:00

提问者网友：不爱我么
2021-04-26 08:02

<html>
<head>
<title>js</title>
<style>
body{background:#CCFFCC;}
.style1{text-align:center;}
a{background:#00CC99;
display:block;
color:Maroon;

font-size:25px;}
a:hover{background:#66FF66;
color:red;}
</style>
<script type="text/javascript">
function change1()
{
var text=document.getElementById("B");
text.innerHTML="<img src=1.jpg width=350 height=250>";
}
function change2()
{
var text=document.getElementById("B");
text.innerHTML="<img src=2.jpg width=350 height=250>";
}
function change3()
{
var text=document.getElementById("B");
text.innerHTML="<img src=3.jpg width=350 height=250>";
}
function change4()
{
var text=document.getElementById("B");
text.innerHTML="<img src=a.jpg width=350 height=250>";
}

</script>
</head>
<body onload="change1()">
<table border=0 width=350 height=5% class=style1 >
<tr>
<td id=A>
<a href=1.jpg onmouseover="change1()">图片1</a>
</td>
<td>
<a href=# onmouseover="change2()">图片2</a>
</td>
<td>
<a href=# onmouseover="change3()">图片3</a>
</td>
<td>
<a href=# onmouseover="change4()">图片4</a>
</td>
</tr>
</table>
<table border=0 width=350 height=30% class=style1 >
<tr>
<td id=B>

</td>
</tr>
</table>
</body>
</html>

滑动门怎样做，给我一个思路

最佳答案

五星知识达人网友：你可爱的野爹
2021-04-26 08:44

效果不是实现了吗？还要什么名份啊？

呵呵，看看我手头的一个例子吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="笃行天下">
<meta name="Keywords" content="笃行天下">
<meta name="Description" content=" http://hi.baidu.com/duxing">
</head>

<!--

.ww1 {width:500px;background-color:#D1E7FC;border-top:1px solid #9EC9EC;border-left:1px solid #9EC9EC;}

.ww1 td {border-right:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;height:28px;text-align:center;width:125px;font-size:12px;cursor:hand;}

.ww1 td.s {border-bottom:1px solid #FFFFFF;font-weight:bold;background-color:#FFFFFF;}

.ww2 {width:500px;border-right:1px solid #9EC9EC;border-top:none;border-left:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;font-size:12px;}

.ww2 a:link {color:#00007f;text-decoration:none;}

.ww2 a:visited {color:#800080;text-decoration:none;}

.ww2 a:hover {color:#00007f;text-decoration:underline;}

.ww2 a:active {color:#00007f;text-decoration:underline;}

.dis {display:block}

.undis {display:none}

-->

</style>

function getNames(obj,name,tij)

{

var p = document.getElementById(obj);

var plist = p.getElementsByTagName(tij);

var rlist = new Array();

for(i=0;i<plist.length;i++)

{

if(plist[i].getAttribute("name") == name)

{

rlist[rlist.length] = plist[i];

}

return rlist;

}

function butong_net(obj,name)

{

var p = obj.parentNode.getElementsByTagName("td");

var p1 = getNames(name,"f","div");

for(i=0;i<p1.length;i++)

{

if(obj==p[i])

{

p[i].className = "s";

p1[i].className = "dis";

}

else

{

p[i].className = "";

p1[i].className = "undis";

}

</script>

<tr>

<td class="s" onmouseover="butong_net(this,'butong_net1')">网页特效库</td>

<td onmouseover="butong_net(this,'butong_net1')">网页工具库1</td>

<td onmouseover="butong_net(this,'butong_net1')">网页工具库2</td>

<td onmouseover="butong_net(this,'butong_net1')">网页工具库3</td>

</tr>

</table>

<tr>

<a href=" http://www.butong.net/background/index.htm" target="_blank">背景按钮特效</a> <a href=" http://www.butong.net/navigation/index.htm" target="_blank">导航菜单特效</a> <a href=" http://www.butong.net/img/index.htm" target="_blank">网页图片特效</a> <a href=" http://www.butong.net/text/index.htm" target="_blank">网页文本特效</a> <a href=" http://www.butong.net/other/index.htm" target="_blank">另类网页特效</a>

</div>

<a href=" http://www.butong.net/tool/html_edit.htm" target="_blank">在线html编辑器</a> <a href=" http://www.butong.net/tool/css_edit/index.htm" target="_blank">在线CSS编辑器</a> <a href=" http://www.butong.net/tool/web_yanse.htm" target="_blank">网页颜色选择器</a> <a href=" http://www.butong.net/tool/gdtys.htm" target="_blank">滚动条颜色生成器</a>

</div>

<a href=" http://www.butong.net/tool/open.htm" target="_blank">弹出窗口生成器</a> <a href=" http://www.butong.net/tool/ymxg.htm" target="_blank">页面过渡效果生成器</a> <a href=" http://www.butong.net/tool/jiamijiemi.htm" target="_blank">网页加密解密工具</a>

</div>

<a href=" http://www.butong.net/tool/fjtzh.htm" target="_blank">文本繁简体转换工具</a> <a href=" http://www.butong.net/tool/hzzpy.htm" target="_blank">汉字转换成拼音工具</a> <a href=" http://www.butong.net/tool/wenzijiami.htm" target="_blank">文字加密解密工具</a>

</div>

</td>

</tr>

</table>

</body>
</html>

=================

例二：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang="us-en">
<head>
<title>css选项卡(html组件)</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" "/>
<meta name="description" content="" />
<style type="text/css">
div.card div{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;}
div.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;}
div.card div.home a.home{ font:normal normal bold 14px/1.5 宋体;}
div.card div.international a.international { font:normal normal bold 14px/1.5 宋体;}
div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋体;}
div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋体;}
div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px;}
</style>
<script type="text/javascript">
var shq={}
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
    if(/a/i.test(e.tagName)){
    e.parentNode.className=e.className;
    e.parentNode.nextSibling.innerHTML=e.innerHTML;
    e.parentNode.nextSibling.style.cssText='border-top:none';
    e.blur();
    }
}
</script>
</head>
<body>
<div class="card">
<div onmouseover="shq.cmenu(event)">
<a href="#" class="home">国内</a>
<a href="#" class="international">国际</a>
<a href="#" class="sport">体育</a>
<a href="#" class="finance">财经</a>
</div>
<div class="content"></div>
</div>

</body>
</html>

全部回答

1楼网友：走死在岁月里
2021-04-26 09:44

<!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 type="text/css">  </style> <script type="text/javascript"> function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容层数量不一样!"); return false; } for(var i = 0 ; i < menus.length ; i++) { _this.$(menus[i]).value = i; _this.$(menus[i]).onmouseover = function(){ for(var j = 0 ; j < menus.length ; j++) { _this.$(menus[j]).className = closeClass; _this.$(divs[j]).style.display = "none"; } _this.$(menus[this.value]).className = openClass; _this.$(divs[this.value]).style.display = "block"; } } }, $ : function(oid){ if(typeof(oid) == "string") return document.getElementById(oid); return oid; } } window.onload = function(){ var SDmodel = new scrollDoor(); SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02"); SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02"); SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02"); } </script> </head> <body> <div class="bodyer"> <h1 class="t_rt"> 滑动门封装类 </h1> <h2> 效果预览 </h2> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="m01">滑动门</li> <li class="sd02" id="m02">滑动门</li> <li class="sd02" id="m03">滑动门</li> <li class="sd02" id="m04">滑动门</li> <li class="sd02" id="m05">滑动门</li> </ul> <div class="bor03 cont"> <div id="c01"> 第一层内容 </div> <div id="c02" class="hidden"> 第二层内容 </div> <div id="c03" class="hidden"> 第三层内容 </div> <div id="c04" class="hidden"> 第四层内容 </div> <div id="c05" class="hidden"> 第五层内容 </div> </div> </div> </div> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="mm01">滑动门</li> <li class="sd02" id="mm02">滑动门</li> <li class="sd02" id="mm03">滑动门</li> <li class="sd02" id="mm04">滑动门</li> <li class="sd02" id="mm05">滑动门</li> </ul> <div class="bor03 cont"> <div id="cc01"> 第一层内容 </div> <div id="cc02" class="hidden"> 第二层内容 </div> <div id="cc03" class="hidden"> 第三层内容 </div> <div id="cc04" class="hidden"> 第四层内容 </div> <div id="cc05" class="hidden"> 第五层内容 </div> </div> </div> </div> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="mmm01">滑动门</li> <li class="sd02" id="mmm02">滑动门</li> <li class="sd02" id="mmm03">滑动门</li> <li class="sd02" id="mmm04">滑动门</li> <li class="sd02" id="mmm05">滑动门</li> </ul> <div class="bor03 cont"> <div id="ccc01"> 第一层内容 </div> <div id="ccc02" class="hidden"> 第二层内容 </div> <div id="ccc03" class="hidden"> 第三层内容 </div> <div id="ccc04" class="hidden"> 第四层内容 </div> <div id="ccc05" class="hidden"> 第五层内容 </div> </div> </div> </div> </div> </body> </html>

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！