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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 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抓取https的内容的代码
2010/04/06 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Python文件去除注释的方法
2015/05/25 Python
python的exec、eval使用分析
2017/12/11 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
np.random.seed() 的使用详解
2020/01/14 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
债务纠纷委托书
2014/08/30 职场文书
培训通知书模板
2015/04/17 职场文书
学校通报表扬范文
2015/05/04 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
创业计划书之书店
2019/09/10 职场文书
SQL基础的查询语句
2021/11/11 MySQL
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python