网编修炼：好看的层切换效果

发布: 2008-3-28 16:18 | 作者: 乌龙 | 来源: 鞭牛士 | 查看: 110次

<p style="font-weight: bold; margin: 1em 1em 0 1em;">CODE:</p><code style="display: block; margin: 0 1em 1em; padding: 0.5em; border: 1px solid #CCC; font: 12px Courier, monospace; line-height: 1.8em;"><head> <style> #red{ display:block; float:left; position:absolute; width:400px; height:400px; background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink); } #green{ display:none; float:left; position:absolute; width:400px; height:400px; background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green); } #blue{ display:none; float:left; position:absolute; width:400px; height:400px; background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue); } #switch{ position:absolute; top:400px; width:400px; height:30px; background-color:#000000; } #switch a.tabs{ float:left; color:#ffffff; height:28px; width:133px; margin:0; padding:8px 0 0 14px; font-size:12px; cursor:pointer; text-decoration:none;text-align:center; } #switch a.tabs:hover{ color:#ffff00; background-color:#666666; text-decoration:none; } body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);} </style> <script language="javascript"> function switchbox(i) { selectbox(i); } function selectbox(i) { switch(i) { case 1: document.getElementById("red").style.display="block"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="none"; break; case 2: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="block"; document.getElementById("blue").style.display="none"; break; case 3: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="block"; break; } } </script> </head> <body><div style="position:absolute;top:19px;left:320px;"> <div id="content"> <div id="red"></div> <div id="green"></div> <div id="blue"></div> </div> <div id="switch"><a class="tabs" id="red-tab" href="javascript:switchbox(1);">红色渐变图层</a><a class="tabs" id="green-tab" href="javascript:switchbox(2);">绿色渐变图层</a><a class="tabs" id="blue-tab" href="javascript:switchbox(3);">蓝色渐变图层</a></div></div></code>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

ps:请自行删除开头代码

CODE:

<div class="blockcode"><span class="headactions" onclick="copycode($('code0'));">复制内容到剪贴板</span><h5>代码:</h5><code id="code0">

和结尾代码

CODE:

</code></div>

TAG: 效果层切换

-5 -3 -1 - +1 +3 +5

评分：0

鞭牛士-网络编辑社区门户

网编修炼：好看的层切换效果

我来说两句

最新更新

月度热点

最新热贴

招聘信息

官方公告