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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
js中document.write的那点事
Dec 12 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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+Html+缓存
2006/12/20 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python flask安装和命令详解
2019/04/02 Python
python3爬取torrent种子链接实例
2020/01/16 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Pandas的Apply函数具体使用
2020/07/21 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
计算机专业应届毕业生自荐信
2013/09/26 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
影视广告专业求职信
2014/09/02 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
《山中访友》教学反思
2016/02/24 职场文书
六年级作文之自救
2019/12/19 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技