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 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript 用函数实现继承详解
May 28 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
公司董事长职责
2013/12/12 职场文书
妇女干部培训方案
2014/05/12 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
初中信息技术教学计划
2015/01/22 职场文书
车队安全员岗位职责
2015/02/15 职场文书
共青团员自我评价
2015/03/10 职场文书
工作态度不好检讨书
2015/05/06 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang