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>
相关文章
这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
这篇文章主要介绍了javascript中attachEvent用法,实例分析了javascript中事件绑定的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript获得url所有参数键值表的方法,实例分析了javascript操作URL的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面这篇文章主要给大家介绍了微信小程序返回到顶部功能的简单实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Echarts实现多条折线可拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了JS中判断null、undefined与NaN的方法,需要的朋友可以参考下2014-03-03
这篇文章主要给大家介绍了关于用JavaScript做一个简易计算器的三种方法,JS中实现一个简单的计算器并不困难,我们只需利用基本的数学运算符和JavaScript的语法即可,需要的朋友可以参考下2023-10-10
javascript SocialHistory 检查访问者是否访问过某站点
今天delicious上这个名为 SocialHistory 的脚本十分引人注目。源代码可以在这里下载。这段js代码的功能就是判断你的用户有没有访问过某个网站。使用方法很简单，例如：2008-08-08
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
这篇文章主要介绍了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果,涉及Sketch.js插件的使用及HTML5元素的应用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-08-08
CSS和Javascript简单复习资料，学习css与js的朋友可以参考下。2010-06-06
最新评论