使用button标签，实现三态图片按钮_表单特效_懂视

使用button标签，实现三态图片按钮_表单特效

2020-11-27 20:34:20 责编:小采

三态图片按钮对于好的用户体验来说必不可少。我对dom事件进行一些处理，在不改变html的情况下，实现了三态按钮。下面的解决方法的关键，主要是去掉虚线选框和对背景进行定位，没有使用循环处理，任何一个按钮，只要定义了背景图片和边框为0，就自动变成了三态按钮。

<body> 
<button style="width:53;height:17;border:0;background:url(http://www.gxlcms.com/upload/button_a.png)"></button> 
<div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> 
<script> 
if(document.all) 
 document.execCommand("BackgroundImageCache",false,true) 
document.body.onload=function(){ 
 if(document.activeElement.tagName=="BUTTON") 
 document.activeElement.blur() 
} 
document.onmouseover=document.onmouseout=document.onmousedown=document.onmouseup=function(e){ 
 var ee=e==null?event.srcElement:e.target 
 e=e||event 
 if(ee.tagName!="BUTTON"||ee.clientWidth!=ee.offsetWidth) 
 return 
 if(e.type=="mousedown"){ 
 ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight) 
 if(document.all) 
 ee.hideFocus=true 
 else 
 return false 
 } 
 if(e.type=="mouseover"||e.type=="mouseup") 
 ee.style.backgroundPosition="0 -"+ee.offsetHeight 
 if(e.type=="mouseout") 
 ee.style.backgroundPosition="0 0" 
} 
</ script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
上面的解决方法还有点美中不足，就是在firefox下，没办法用Tab键定位按钮，这是因为为了去掉虚框，屏蔽了点击事件。下面的程序解决了这个问题，方法是在按钮里创建一个不可见的新按钮，由它转移焦点。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

下载本文

显示全文

全部频道