Rumah > Artikel > hujung hadapan web > javascript实现按钮颜色渐变效果的实例讲解

javascript实现按钮颜色渐变效果的实例讲解

巴扎黑asal: 2017-08-22 11:09:421643semak imbas

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

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

运行效果截图如下：

具体代码如下：

<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.php.cn/"" onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  </FORM>
  </TD>
  </TR>
  </TBODY>
  </TABLE>
</CENTER>
</BODY>
</HTML>

Atas ialah kandungan terperinci javascript实现按钮颜色渐变效果的实例讲解 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript中for循环使用时的注意事项Artikel seterusnya：JavaScript表单验证插件的使用介绍

Artikel berkaitan

Lihat lagi