页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

使用button标签，实现三态图片按钮

发布：dxy 字体：[增加减小] 类型：转载

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

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

上面的解决方法还有点美中不足，就是在firefox下，没办法用Tab键定位按钮，这是因为为了去掉虚框，屏蔽了点击事件。下面的程序解决了这个问题，方法是在按钮里创建一个不可见的新按钮，由它转移焦点。

点击运行可以看到效果:

<style> 
button{border:0} 
</style> 
<body> 
<button style="width:53;height:17;background:url(http://www.jb51.net/upload/button_a.png)"></button> 
</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 o,ee=e==null?event.srcElement:e.target 
    e=e||event 
    if(ee.tagName=="BUTTON"&&ee.clientWidth==ee.offsetWidth){ 
        if(e.type=="mousedown"){ 
            if((ee.lastChild||"").tagName!="BUTTON"){ 
                o=document.createElement("button") 
                o.style.cssText="position:absolute;left:-9000" 
                ee.appendChild(o) 
                ee.onfocus=function(){ee.lastChild.focus()} 
            } 
            ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight) 
        } 
        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 全选提示:你可先修改部分代码,再按运行]

Tags：使用button标签实现三态图片按钮

百度中搜索更多的关于使用button标签，实现三态图片按钮内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文文章来源

0

上一篇文章：[IE&FireFox兼容]JS对select操作
下一篇文章：js下拉框里超过变成省略号

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行