一个不错的CSS模拟的按钮效果

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

<style type="text/css">

<!--

.btnOFF{padding:3px;border:1px outset;cursor:pointer;background-color: green;width:100px;height:16px;text-align:center;}

.btnON{padding:3px;border:1px inset;background-color: #CCCC33;width:100px;height:16px;text-align:center;color:red;}

-->

</style>

<script language="JavaScript">

<!--

function setEffect(link_id)

{

var i;

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

{

if(i != link_id)

{

link[i].className = "btnOFF";

}

else

{

link[i].className = "btnON";

}

}

}

//-->

</script>

<p align=center><span id="link" class="btnOFF" onclick="setEffect(0)">Google</span><span id="link" class="btnOFF" onclick="setEffect(1)">Baidu</span><span id="link" class="btnOFF" onclick="setEffect(2)">Sina</span><span id="link" class="btnOFF" onclick="setEffect(3)">Sohu</span><span id="link" class="btnOFF" onclick="setEffect(4)">CSDN</span><span id="link" class="btnOFF" onclick="setEffect(5)">Webjx</span></p>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航