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获取元素样式属性值的方法
Dec 25 Javascript
js创建元素(节点)示例
Jan 02 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
vuex管理状态仓库使用详解
Jul 29 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
带薪年假请假条
2014/02/04 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
婚前保证书范文
2015/02/28 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
导游词之张家界
2019/10/31 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript