자바스크립트를 사용하여 버튼 색상 그라데이션 효과를 구현하는 방법의 예-JS 튜토리얼-php.cn

자바스크립트를 사용하여 버튼 색상 그라데이션 효과를 구현하는 방법의 예

巴扎黑

풀어 주다： 2017-08-22 11:09:42

원래의

1693명이 탐색했습니다.

이 문서의 예에서는 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>

로그인 후 복사

위 내용은 자바스크립트를 사용하여 버튼 색상 그라데이션 효과를 구현하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!