如何使用JavaScript实现按钮颜色渐变的动画效果方法介绍
程序员文章站
2022-04-07 15:25:16
...
本文实例讲述了js实现按钮颜色渐变动画效果的方法。分享给大家供大家参考。具体如下：
这里演示js实现按钮慢慢变色的方法，鼠标移到按钮上，按钮的背景色就发生变化，是慢慢的变化，点击按钮会打开指定链接，这里主要是演示按钮变色的代码实现方法。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/
具体代码如下：
<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 = "进入JavaScript中文网";
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="http://www.jb51.net/"" onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
</FORM></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>
以上就是如何使用JavaScript实现按钮颜色渐变的动画效果方法介绍的详细内容，更多请关注其它相关文章！
上一篇： HTML+CSS学习笔记 (11)
下一篇： CSS中的伪类与伪元素及二者间的区别说明
推荐阅读
-
javascript实现按钮颜色渐变效果的实例讲解
-
js+HTML5实现canvas多种颜色渐变效果的方法_javascript技巧
-
js+HTML5实现canvas多种颜色渐变效果的方法_javascript技巧
-
css如何使用position 属性实现定位效果？css中的4种定位方法介绍（实例）
-
javascript实现按钮颜色渐变效果的实例讲解
-
如何使用JavaScript实现按钮颜色渐变的动画效果方法介绍
-
如何使用纯css实现Material Design中按钮的水滴动画效果
-
如何使用css3实现input输入框颜色渐变发光的效果
-
使用CSS3点击按钮实现背景渐变动画的效果
-
使用CSS3点击按钮实现背景渐变动画的效果