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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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 Pear 安装及使用
2009/03/19 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
js获取html文件的思路及示例
2013/09/17 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python常见的格式化输出小结
2016/12/15 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
python dlib人脸识别代码实例
2019/04/04 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python如何将图片转换素描画
2020/09/08 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
EJB的几种类型
2012/08/15 面试题
EJB的角色和三个对象
2015/12/31 面试题
软件项目开发计划书
2014/05/01 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
春游踏青活动方案
2014/08/14 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
端午节活动总结报告
2015/02/11 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python