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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php图片添加水印例子
2016/07/20 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
Python的Django框架使用入门指引
2015/04/15 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python多进程原理与用法分析
2018/08/21 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python中Django文件上传方法详解
2020/08/05 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
幼儿园教师演讲稿
2014/05/06 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP