js实现按钮颜色渐变动画效果

 更新时间:2015年08月20日 15:12:16   作者:佚名  
这篇文章主要介绍了js实现按钮颜色渐变动画效果的方法,涉及javascript鼠标事件及页面表单元素样式的动态操作技巧,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本文实例讲述了js实现按钮颜色渐变动画效果的方法。分享给大家供大家参考。具体如下:

这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/

具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<HTML><HEAD><TITLE>按钮慢慢变色</TITLE>
<STYLE type=text/css>
BODY {
 MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
 FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none
}
A:hover {
 FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline
}
A:active {
 FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
.STYLE1 {
 color: #000099;
 font-weight: bold;
 font-family: "华文新魏";
 font-size: 30px;
}
.STYLE2 {
 color: #FF3399;
 font-size: 40px;
 font-family: "华文行楷";
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>
 <span class="STYLE2">按钮慢慢变色</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#66FF00 border=5 borderlight="green">
 <TBODY>
 <TR>
 <TD align=middle><span class="STYLE1">效果显示</span></TD>
 </TR>
 <TR>
 <TD align=middle>
  <SCRIPT language=JavaScript>
hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function mOver() {
for (i = 0; i < 13; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40);
 }
}
function mOut() {
document.myForm.button.value = "进入脚本之家";
for (i = 0; i < 12; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40);
 }
}
// End -->
</SCRIPT>
  <FORM name=myForm>
  <input onMouseDown='document.myForm.button.value=" 谢谢"' onMouseOver=mOver() onClick='window.location="https://www.jb51.net/"' onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  </FORM></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • dwr spring的集成实现代码

    dwr spring的集成实现代码

    需正确使用new和spring,注意两者的区别
    2009-03-03
  • JS实现闪动的title消息提醒效果

    JS实现闪动的title消息提醒效果

    这篇文章主要介绍了JS实现闪动的title消息提醒效果,考虑并兼容了大部份的浏览器,需要的朋友可以参考下
    2014-06-06
  • 微信小程序实现按字母排列选择城市功能

    微信小程序实现按字母排列选择城市功能

    这篇文章主要介绍了微信小程序实现按字母排列选择城市功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 基于javascript实现动态显示当前系统时间

    基于javascript实现动态显示当前系统时间

    这篇文章主要介绍了基于javascript实现动态显示当前系统时间,以一个完整实例形式较为详细的分析了js动态显示当前系统时间的实现技巧,需要的朋友可以参考下
    2016-01-01
  • 小程序自定义tabBar组件封装

    小程序自定义tabBar组件封装

    这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 使用JavaScript优雅实现文本展开收起功能

    使用JavaScript优雅实现文本展开收起功能

    这篇文章主要为大家详细介绍了如何使用JavaScript优雅实现文本展开收起功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • JavaScript中filter的用法实例分析

    JavaScript中filter的用法实例分析

    这篇文章主要介绍了JavaScript中filter的用法,结合实例形式分析了filter的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • JS实现的base64加密解密操作示例

    JS实现的base64加密解密操作示例

    这篇文章主要介绍了JS实现的base64加密解密操作,结合实例形式分析了基于javascript的base64加密与解密函数定义与使用相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • layui-laydate时间日历控件使用方法详解

    layui-laydate时间日历控件使用方法详解

    这篇文章主要为大家详细介绍了layui-laydate时间日历控件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 浅谈webpack 构建性能优化策略小结

    浅谈webpack 构建性能优化策略小结

    webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,这篇文章主要介绍了浅谈webpack 构建性能优化策略小结,感兴趣的小伙伴们可以参考一下
    2018-06-06

最新评论