提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js通过更改按钮的显示样式实现按钮的滑动效果

JS 实现 显示 通过 效果 更改 样式 按钮
2023-06-13 09:15:25 时间
通过更改按钮的显示样式，来实现按钮动态滑动
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<style>

.search{background:#008800;color:#fff;border:none;height:26px;line-height:20px;width:63x;}
.searchhover{background:#000099;color:#fff;border:none;height:26px;line-height:20px;width:63px;}
</style>


</head>
<bodyonload="js()">
<inputtype="button"id="btn"class="search"name="btn"value="登录"/>
<inputtype="button"id="btn2"class="search"name="btn"value="注销"/>
<scripttype="text/javascript">

functionjs()
{
//使ie6button支持hover属性obj是要支持hover的实体hover是btn:hover的样式，init是初始样式
obj="btn";
alert(navigator.appName);
if(navigator.appName=="MicrosoftInternetExplorer"&&parseFloat(navigator.appVersion)==4){//判断ie6
varo=document.getElementsByName(obj);
for(vari=0;i<o.length;i++){
if(o[i].type=="button"){
//o[i].className="search";
o[i].onmouseover=function(){this.className="searchhover"}
o[i].onmouseout=function(){this.className="search"};
}
}
}
}
</script>
</body>
</html>

相关文章