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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
详解Angular路由之路由守卫
May 10 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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
ZF等常用php框架中存在的问题
2008/01/10 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
jQuery技巧总结
2011/01/01 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序实现留言功能
2018/10/31 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
详细分析React 表单与事件
2020/07/08 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
对Python中画图时候的线类型详解
2019/07/07 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
资深财务管理人员自我评价
2013/09/22 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
银行优秀员工事迹
2014/02/06 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
小学优秀学生评语
2014/12/29 职场文书
教师个人学习总结
2015/02/11 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js