首頁 > web前端 > js教程 > js如何實現淡入淡出效果_javascript技巧

js如何實現淡入淡出效果_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 15:33:28
原創
2018 人瀏覽過

淡入淡出效果,在日常專案中經常用到,可惜原生JS沒有類似的方法,而有時小的頁面並不值得引入一個jQuery庫,所以就自己寫了一個,已封裝,有用得著的朋友,可以直接使用。程式碼中另附有一個設定元素透明度的方法, 是依IE規則(0~100)設置, 若改成標準設定方法(0.00~1.00),,下面使用時請考慮浮點精確表達差值。

參數說明:
fadeIn()與fadeOut()均有三個參數,第一個是事件, 必填;第二個是淡入淡出速度,正整數,大小自己權衡,可選參數;第三個, 是指定淡入淡出到的透明度值(類似jQuery中的fadeTo()), 0~100的正整數值,也是可選參數。
關鍵程式碼:

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

//淡入效果(含淡入到指定透明度)

function fadeIn(elem, speed, opacity){

 /*

  * 参数说明

  * elem==>需要淡入的元素

  * speed==>淡入速度,正整数(可选)

  * opacity==>淡入到指定的透明度,0~100(可选)

  */

 speedspeed = speed || 20;

 opacityopacity = opacity || 100;

 //显示元素,并将元素值为0透明度(不可见)

 elem.style.display = 'block';

 iBase.SetOpacity(elem, 0);

 //初始化透明度变化值为0

 var val = 0;

 //循环将透明值以5递增,即淡入效果

 (function(){

  iBase.SetOpacity(elem, val);

  val += 5;

  if (val <= opacity) {

   setTimeout(arguments.callee, speed)

  }

 })();

}

  

//淡出效果(含淡出到指定透明度)

function fadeOut(elem, speed, opacity){

 /*

  * 参数说明

  * elem==>需要淡入的元素

  * speed==>淡入速度,正整数(可选)

  * opacity==>淡入到指定的透明度,0~100(可选)

  */

 speedspeed = speed || 20;

 opacityopacity = opacity || 0;

 //初始化透明度变化值为0

 var val = 100;

 //循环将透明值以5递减,即淡出效果

 (function(){

  iBase.SetOpacity(elem, val);

  val -= 5;

  if (val >= opacity) {

   setTimeout(arguments.callee, speed);

  }else if (val < 0) {

   //元素透明度为0后隐藏元素

   elem.style.display = 'none';

  }

 })();

}

登入後複製

效果圖:

核心程式碼,大家可以直接複製程式碼看效果

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

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>原生JS实现淡入淡出效果</title>

<style>

/*demo css*/

#demo div.box {float:left;width:31%;margin:0 1%}

#demo div.box h2{margin-bottom:10px}

#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}

#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}

</style>

<script>

window.onload = function(){

 //底层共用

 var iBase = {

  Id: function(name){

   return document.getElementById(name);

  },

  //设置元素透明度,透明度值按IE规则计,即0~100

  SetOpacity: function(ev, v){

   ev.filters &#63; ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;

  }

 }

 //淡入效果(含淡入到指定透明度)

 function fadeIn(elem, speed, opacity){

  /*

   * 参数说明

   * elem==&gt;需要淡入的元素

   * speed==&gt;淡入速度,正整数(可选)

   * opacity==&gt;淡入到指定的透明度,0~100(可选)

   */

  speedspeed = speed || 20;

  opacityopacity = opacity || 100;

  //显示元素,并将元素值为0透明度(不可见)

  elem.style.display = 'block';

  iBase.SetOpacity(elem, 0);

  //初始化透明度变化值为0

  var val = 0;

  //循环将透明值以5递增,即淡入效果

  (function(){

   iBase.SetOpacity(elem, val);

   val += 5;

   if (val &lt;= opacity) {

    setTimeout(arguments.callee, speed)

   }

  })();

 }

   

 //淡出效果(含淡出到指定透明度)

 function fadeOut(elem, speed, opacity){

  /*

   * 参数说明

   * elem==&gt;需要淡入的元素

   * speed==&gt;淡入速度,正整数(可选)

   * opacity==&gt;淡入到指定的透明度,0~100(可选)

   */

  speedspeed = speed || 20;

  opacityopacity = opacity || 0;

  //初始化透明度变化值为0

  var val = 100;

  //循环将透明值以5递减,即淡出效果

  (function(){

   iBase.SetOpacity(elem, val);

   val -= 5;

   if (val &gt;= opacity) {

    setTimeout(arguments.callee, speed);

   }else if (val &lt; 0) {

    //元素透明度为0后隐藏元素

    elem.style.display = 'none';

   }

  })();

 }

   

   

 var btns = iBase.Id('demo').getElementsByTagName('input');

   

 btns[0].onclick = function(){

  fadeIn(iBase.Id('fadeIn'));

 }

 btns[1].onclick = function(){

  fadeOut(iBase.Id('fadeOut'),40);

 }

 btns[2].onclick = function(){

  fadeOut(iBase.Id('fadeTo'), 20, 10);

 }

   

}

</script>

  

  

  

<!--DEMO start-->

<div id="demo">

 <div class="box">

  <h2><input type="button" value="点击淡入"></h2>

  <div id="fadeIn" style="display:none">

   <p>脚本之家</p>

  </div>

  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>

 </div>

   

 <div class="box">

  <h2><input type="button" value="点击淡出"></h2>

  <div id="fadeOut">

    <p>脚本之家</p>

  </div>

  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>

 </div>

   

 <div class="box">

  <h2><input type="button" value="点击淡出至指定透明度"></h2>

  <div id="fadeTo">

    <p>脚本之家</p>

  </div>

  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>

 </div>

</div>

<!--DEMO end-->

登入後複製

   以上就是原生js實現淡入淡出效果的全部程式碼,希望對大家的學習有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
帶有淡入/淡出過渡的 CSS Marquee
來自於 1970-01-01 08:00:00
0
0
0
javascript - Jquery焦點圖淡入淡出效果求指教
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue中路由過渡的問題?
來自於 1970-01-01 08:00:00
0
0
0
javascript - 關於audio標籤暫停的問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板