Un exemple de comment implémenter l'effet de dégradé de couleur des boutons à l'aide de javascript-js tutoriel-php.cn

Un exemple de comment implémenter l'effet de dégradé de couleur des boutons à l'aide de javascript

巴扎黑

Libérer： 2017-08-22 11:09:42

original

1656 Les gens l'ont consulté

L'exemple de cet article décrit la méthode de réalisation de l'effet d'animation de dégradé de couleur des boutons dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de la méthode js pour changer lentement la couleur d'un bouton. Lorsque la souris se déplace sur le bouton, la couleur d'arrière-plan du bouton change lentement. ouvrez le lien spécifié. L'essentiel ici est de démontrer la méthode d'implémentation du code pour le changement de couleur des boutons.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Un exemple de comment implémenter leffet de dégradé de couleur des boutons à laide de javascript

Le code spécifique est le suivant :

<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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!