1,451
社区成员
发帖
与我相关
我的任务
分享用CSS做滑门？
像这样的效果，如何做到的呢？
http://www.51mogen.com/ 里面的人气宝贝、热点时尚的滑门效果，
跪求相关代码，万分感激！！！
在线等。。。
http://www.51mogen.com/ 里面的人气宝贝、热点时尚的滑门效果，
跪求相关代码，万分感激！！！
在线等。。。
...全文
请发表友善的回复…
发表回复
hoverchou 2009-04-17
- 打赏
- 举报
来报到,,,,
lonelyriver 2009-03-29
- 打赏
- 举报
……
y376781526 2009-03-27
- 打赏
- 举报
没有美化，只是把基本的功能实现了，看下是你要的不......
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
div{width:300px;border:1px solid red;}
#dv1,#dv2{height:200px;}
#list{height:30px;text-align:left;}
li{float:left;border:1px solid red;height:100%;border-bottom:0;}
</style>
<script type="text/javascript">
function show(id1,id2)
{
document.getElementById(id1).style.display="";
document.getElementById(id2).style.display="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="nav">
<div id="list">
<ul>
<li onmouseover="show('dv1','dv2');">人气宝贝</li>
<li onmouseover="show('dv2','dv1');">热点时尚</li>
</ul>
</div>
<div id="dv1">1111111</div>
<div id="dv2" style="display:none">2222222</div>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
div{width:300px;border:1px solid red;}
#dv1,#dv2{height:200px;}
#list{height:30px;text-align:left;}
li{float:left;border:1px solid red;height:100%;border-bottom:0;}
</style>
<script type="text/javascript">
function show(id1,id2)
{
document.getElementById(id1).style.display="";
document.getElementById(id2).style.display="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="nav">
<div id="list">
<ul>
<li onmouseover="show('dv1','dv2');">人气宝贝</li>
<li onmouseover="show('dv2','dv1');">热点时尚</li>
</ul>
</div>
<div id="dv1">1111111</div>
<div id="dv2" style="display:none">2222222</div>
</div>
</form>
</body>
</html>
