HTML结构
该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮
CSS样式
以下是该css3点击按钮特效的通用CSS样式：
插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：
上面的CSS代码可以生成如下图的动画效果：
在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。
在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。
亲，弄个计算器，判断一下，比如有个按钮的id为btn1,那么js代码就是
<script type="text/javascript">window.onload=function()
{
var oBtn1=document.getElementById("btn1")
var n=0
oBtn.onclick=function()
{
//单击偶数次执行
if(n%2==0)
{
this.value="关闭"
//打开js特效代码
}
//单击奇数次执行
else
{
this.value="打开"
//关闭js特效代码
}
n++
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="打开"/>
</body>
</html>
这个肯定行！<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>css 菜单</title>
<style>
body{
background-color:#FFFFFF
}
#fbtn{
/*display:none*/
overflow:hidden
position:relative
width:115px
height:30px
border-style:solid
border-width:1px
border-color:#0e0eff
padding:1px
}
#fbtn_txt{
position:absolute
float:right
right:0px
width:250px
height:30px
}
#fbtn_txt div{
width:115px
height:30px
float:right
padding-top:11px
font-size:9px
font-family:small fonts
color:#800080
text-align:center
cursor:pointer
}
</style>
</head>
<body>
<div id=fbtn>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M1</div>
<div>my fhoujun </div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M1</div>
<div>my fhoujun</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<script>
var current=null
var t=null
for(var i=0i<fbtn.lengthi++){
fbtn[i].index=i
fbtn[i].style.display="block"
fbtn[i].onmouseover=function(){
if(!current){
current=this
domove(this.index)
}
else if(current!=this){
domove(current.index)
domove(this.index)
current=this
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index)
current=null
}
}
}
function domove(i){
var o=fbtn[i].firstChild
var x=fbtn[i].firstChild.firstChild.offsetWidth
if(o.style.posRight<(-x)){
o.style.posRight=0
var t=o.removeChild(o.firstChild)
o.appendChild(t)
}
else{
o.style.posRight-=3
setTimeout('domove('+i+')',15)
}
}
</script>
</body>
</html>
