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

前端技术 2023/08/31 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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 = \"进入phpstudy\";
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.phpstudy.net/\"\' onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  </FORM></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

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

本文地址：https://www.stayed.cn/item/1074

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案