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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Vuejs实现购物车功能
Nov 05 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP中常用的转义函数
2014/02/28 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
护士求职自荐信范文
2014/03/19 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
自荐信模板大全
2015/03/27 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript