如何使用JavaScript实现按钮颜色渐变的动画效果方法介绍-js教程-PHP中文网

首页

web前端

js教程

如何使用JavaScript实现按钮颜色渐变的动画效果方法介绍

巴扎黑

Sep 08, 2017 am 10:48 AM

javascript动画渐变

本文实例讲述了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>

以上是如何使用JavaScript实现按钮颜色渐变的动画效果方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn