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


Posted in Javascript onApril 23, 2014

通过更改按钮的显示样式,来实现按钮动态滑动

<!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>
Javascript 相关文章推荐
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
vue项目中axios使用详解
Feb 07 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 #Javascript
Jquery实现Div上下移动示例
Apr 23 #Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 #Javascript
JQuery下拉框应用示例介绍
Apr 23 #Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 #Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 #Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 #Javascript
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP的博客ping服务代码
2012/02/04 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
基于python使用tibco ems代码实例
2019/12/20 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Python容器类型公共方法总结
2020/08/19 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
博士毕业生自我鉴定范文
2014/04/13 职场文书
优秀员工评优方案
2014/06/13 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL