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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
Vue自定义多选组件使用详解
Sep 08 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python连接MySQL数据库实例分析
2015/05/12 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
学校火灾防控方案
2014/06/09 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
学校就业保障协议书
2019/06/24 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL