js通过更改按钮的显示样式实现按钮的滑动效果
更新时间：2014年04月23日 16:40:45 作者：
使用js实现按钮的滑动效果，通过更改按钮的显示样式，来实现按钮动态滑动,需要的朋友可以参考下
通过更改按钮的显示样式，来实现按钮动态滑动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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>
<body onload="js()">
<input type="button" id="btn" class="search" name="btn" value="登 录"/>
<input type="button" id="btn2" class="search" name="btn" value="注 销"/>
<script type="text/javascript" >
function js()
{
// 使ie6 button支持hover属性 obj是要支持hover的实体 hover是btn:hover的样式，init是初始样式
obj="btn";
alert(navigator.appName);
if(navigator.appName == "Microsoft Internet Explorer" && parseFloat(navigator.appVersion) == 4){// 判断ie6
var o = document.getElementsByName(obj);
for(var i=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>
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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>
<body onload="js()">
<input type="button" id="btn" class="search" name="btn" value="登 录"/>
<input type="button" id="btn2" class="search" name="btn" value="注 销"/>
<script type="text/javascript" >
function js()
{
// 使ie6 button支持hover属性 obj是要支持hover的实体 hover是btn:hover的样式，init是初始样式
obj="btn";
alert(navigator.appName);
if(navigator.appName == "Microsoft Internet Explorer" && parseFloat(navigator.appVersion) == 4){// 判断ie6
var o = document.getElementsByName(obj);
for(var i=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>
相关文章
这篇文章主要介绍了CocosCreator源码解读之引擎启动与主循环，对CocosCreator感兴趣的同学，可以研究参考一下2021-04-04
Save a File Using a File Save Dialog Box
Save a File Using a File Save Dialog Box...2007-06-06
对于JS框架开发中的客户端（浏览器）兼容难题，各位想必都不陌生。平常，我们都用if去面对接口不一致以及成堆的bug。然而，这里介绍的方法却可以让兼容更加优雅。2010-08-08
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别,下面这篇文章主要给大家介绍了关于利用微信小程序制作属于自己的Icon图标的相关资料,需要的朋友可以参考下2022-04-04
Javascript 判断客户端是否为 PC 还是手持设备，有时候项目中需要用到，很方便的检测，源生的哦，方法一共有两种2014-04-04
下面小编就为大家分享一篇基于JavaScript 性能优化技巧心得，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了JavaScript实现表单验证案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了JS实现网页上随滚动条滚动的层效果代码,涉及JavaScript页面元素属性的获取、运算及设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要帮助大家深入理解JavaScript程序中内存泄漏问题，感兴趣的小伙伴们可以参考一下2016-03-03
由于 JavaScript 的语言特性，我们可以向通用对象动态添加和删除属性。所以 Object 也可以看成是 JS 的一种特殊的集合。2010-01-01
最新评论