An introduction to how to use JavaScript to animate button color gradients-JS Tutorial-php.cn

An introduction to how to use JavaScript to animate button color gradients

巴扎黑

Release： 2017-09-08 10:48:58

Original

1332 people have browsed it

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

&lt;HTML>&lt;HEAD>&lt;TITLE>按钮慢慢变色&lt;/TITLE>
&lt;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: "华文行楷";
}
&lt;/STYLE>
&lt;META http-equiv=Content-Type content="text/html; charset=gb2312">
&lt;/HEAD>
&lt;BODY bgColor=#fef4d9>
&lt;CENTER>
 &lt;span class="STYLE2">按钮慢慢变色&lt;/span>
&lt;/CENTER>&lt;BR>
&lt;CENTER>
&lt;TABLE borderColor=#66FF00 border=5 borderlight="green">
 &lt;TBODY>
 &lt;TR>
 &lt;TD align=middle>&lt;span class="STYLE1">效果显示&lt;/span>&lt;/TD>
 &lt;/TR>
 &lt;TR>
 &lt;TD align=middle>
  &lt;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 &lt; 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 &lt; 12; i++) {
setTimeout("document.myForm.button.style.background = "#"+hexColor[i]+"0"+hexColor[i]+"0c0";", i * 40);
 }
}
// End -->
&lt;/SCRIPT>
  &lt;FORM name=myForm>
  &lt;input onMouseDown="document.myForm.button.value=" 谢谢"" onMouseOver=mOver() onClick="window.location="http://www.jb51.net/"" onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  &lt;/FORM>&lt;/TD>&lt;/TR>&lt;/TBODY>&lt;/TABLE>
&lt;/CENTER>
&lt;/BODY>
&lt;/HTML>

Copy after login

The above is the detailed content of An introduction to how to use JavaScript to animate button color gradients. For more information, please follow other related articles on the PHP Chinese website!