ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptを使用してボタンの色のグラデーション効果を実装する方法の例

JavaScriptを使用してボタンの色のグラデーション効果を実装する方法の例

巴扎黑
リリース: 2017-08-22 11:09:42
オリジナル
1730 人が閲覧しました


この記事の例では、js を使用してボタンのカラー グラデーション アニメーション効果を実現する方法を説明します。皆さんの参考に共有してください。詳細は次のとおりです。

これは、ボタンの上にマウスを移動すると、ボタンの背景色がゆっくりと変化する JS メソッドのデモです。ボタンをクリックすると、指定されたリンクが開きます。ここでは主にボタンの色を変更するコードの実装方法をデモします。

実行中のエフェクトのスクリーンショットは次のとおりです:

JavaScriptを使用してボタンの色のグラデーション効果を実装する方法の例

具体的なコードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

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

ログイン後にコピー

以上がJavaScriptを使用してボタンの色のグラデーション効果を実装する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート