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解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
js实现消息滚动效果
Jan 18 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
js刷新页面location.reload()用法详解
Dec 09 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中生成UUID自定义函数分享
2015/06/10 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
json跟xml的对比分析
2008/06/10 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
vue组件与复用详解
2018/04/08 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
使用django自带的user做外键的方法
2020/11/30 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
香港交友网站:be2香港
2018/07/22 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
模范教师事迹材料
2014/12/16 职场文书
劳资员岗位职责
2015/02/13 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
医院病假条怎么写
2015/08/17 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python