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 相关文章推荐
window.onresize 多次触发的解决方法
Nov 08 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
PHPThumb图片处理实例
2014/05/03 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript多线程详解
2015/08/12 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
优秀大学生的自我评价
2014/01/16 职场文书
优秀企业获奖感言
2014/02/01 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年校长工作总结
2014/12/11 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
幼师自荐信范文
2015/03/06 职场文书