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 相关文章推荐
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php银联网页支付实现方法
2015/03/04 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
解析URI与URL之间的区别与联系
2013/11/22 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python k-近邻算法实例分享
2014/06/11 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
使用Python的turtle模块画国旗
2019/09/24 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
成绩单家长评语大全
2014/04/16 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
初中作文评语
2014/12/25 职场文书
物业保安辞职信
2015/05/12 职场文书
小学教育见习总结
2015/06/23 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server