Maison > Article > interface Web > Un exemple de comment implémenter l'effet de dégradé de couleur des boutons à l'aide de javascript

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

巴扎黑original: 2017-08-22 11:09:421642parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Choses à noter lors de l'utilisation de boucles for en javascriptArticle suivant：Choses à noter lors de l'utilisation de boucles for en javascript

Articles Liés

Voir plus