Heim > Artikel > Web-Frontend > Ein Beispiel für die Implementierung des Farbverlaufseffekts einer Schaltfläche mithilfe von Javascript

Ein Beispiel für die Implementierung des Farbverlaufseffekts einer Schaltfläche mithilfe von Javascript

巴扎黑Original: 2017-08-22 11:09:421635Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zur Realisierung des Farbverlaufsanimationseffekts für Schaltflächen in js. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Hier ist eine Demonstration der js-Methode zum langsamen Ändern der Farbe einer Schaltfläche. Wenn Sie mit der Maus über die Schaltfläche fahren, ändert sich die Hintergrundfarbe der Schaltfläche Öffnen Sie den angegebenen Link. Die Hauptsache hier ist: Demonstriert die Code-Implementierungsmethode zum Ändern der Schaltflächenfarbe.

Der Screenshot des Laufeffekts lautet wie folgt:

Ein Beispiel für die Implementierung des Farbverlaufseffekts einer Schaltfläche mithilfe von Javascript

Der spezifische Code lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Implementierung des Farbverlaufseffekts einer Schaltfläche mithilfe von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was Sie bei der Verwendung von For-Schleifen in Javascript beachten solltenNächster Artikel：Was Sie bei der Verwendung von For-Schleifen in Javascript beachten sollten

In Verbindung stehende Artikel

Mehr sehen