Heim > Artikel > Web-Frontend > Eine Einführung in die Verwendung von JavaScript zum Animieren von Farbverläufen für Schaltflächen

Eine Einführung in die Verwendung von JavaScript zum Animieren von Farbverläufen für Schaltflächen

巴扎黑Original: 2017-09-08 10:48:581336Durchsuche

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/

具体代码如下：

&lt;HTML>&lt;HEAD>&lt;TITLE>按钮慢慢变色&lt;/TITLE>
&lt;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: "华文行楷";
}
&lt;/STYLE>
&lt;META http-equiv=Content-Type content="text/html; charset=gb2312">
&lt;/HEAD>
&lt;BODY bgColor=#fef4d9>
&lt;CENTER>
 &lt;span class="STYLE2">按钮慢慢变色&lt;/span>
&lt;/CENTER>&lt;BR>
&lt;CENTER>
&lt;TABLE borderColor=#66FF00 border=5 borderlight="green">
 &lt;TBODY>
 &lt;TR>
 &lt;TD align=middle>&lt;span class="STYLE1">效果显示&lt;/span>&lt;/TD>
 &lt;/TR>
 &lt;TR>
 &lt;TD align=middle>
  &lt;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 &lt; 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 &lt; 12; i++) {
setTimeout("document.myForm.button.style.background = "#"+hexColor[i]+"0"+hexColor[i]+"0c0";", i * 40);
 }
}
// End -->
&lt;/SCRIPT>
  &lt;FORM name=myForm>
  &lt;input onMouseDown="document.myForm.button.value=" 谢谢"" onMouseOver=mOver() onClick="window.location="http://www.jb51.net/"" onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  &lt;/FORM>&lt;/TD>&lt;/TR>&lt;/TBODY>&lt;/TABLE>
&lt;/CENTER>
&lt;/BODY>
&lt;/HTML>

Das obige ist der detaillierte Inhalt vonEine Einführung in die Verwendung von JavaScript zum Animieren von Farbverläufen für Schaltflächen. 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：Mehrere Methoden zur FormularübermittlungNächster Artikel：Mehrere Methoden zur Formularübermittlung

In Verbindung stehende Artikel

Mehr sehen