首頁 > web前端 > js教程 > JavaScript滿天星導航列實作方法

JavaScript滿天星導航列實作方法

亚连
發布: 2018-05-31 17:15:35
原創
1853 人瀏覽過

這篇文章跟大家分享了JavaScript滿天星導航列實作方法,以前也介紹過很多關於特效導航的製作方法,對此有興趣的朋友參考學習下。

說明

分享一個滿天星導覽列的效果,程式碼不多,但效果挺好看,先看看效果圖吧。

解釋

#實現這個效果,需要掌握的知識不用很多,知道簡單的CSS,會用JS取得元素, 能綁定事件基本上就夠了。
好的,我們直接來看程式碼,註解已經寫的很詳細了,不想看有註解的,點這裡點擊預覽。

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

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

<!doctype html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <style>

body {

 background-color: #000;

 /* 防止出现左右的滚动条 */

 overflow: hidden;

 margin: 0;

 padding: 0;

}

.wrapper {

 width: 100%;

 height: 100px;

}

.wrapper .nav {

 list-style: none;

 width: 800px;

 height: 100px;

 padding: 0;

 margin: 0 auto;

}

.wrapper .nav li {

 width: 25%;

 height: 50px;

 float: left;

 margin-top: 25px;

}

.wrapper .nav li a {

 text-decoration: none;

 color: #fff;

 text-align: center;

 line-height: 50px;

 display: block;

 font-size: 20px;

 font-family: "KaiTi";

}

 

/* 闪烁的星星 的基本样式 */

.star {

 width: 5px;

 height: 5px;

 background: #fff;

 position: absolute;

 z-index: -1;

}

 

/* 闪烁动画,改变透明度 */

@keyframes blink {

 from {

 opacity: 0.2;

 }

 to {

 opacity: 1;

 }

}

</style>

 </head>

 <body>

 <p class="wrapper">

  <ul class="nav">

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航1</a></li>

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航2</a></li>

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航3</a></li>

  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航4</a></li>

  </ul>

 </p>

<script>

 

// 定义一个 starrySky 对象

var starrySky = {

 // 星星的数量

 starNum: 100,

 

 // 星星的大小,返回一个 2 ~ 12 的随机数

 starSize () { return 2 + Math.trunc(Math.random() * 10) },

 

 // 星星的颜色

 starColor: "#fff",

 

 // 线的颜色,鼠标进入导航区域,星星会连成一条线

 lineColor: "#fff",

 

 // 线的高度

 lineHeight: "3px",

 

 // 星星连成线的时间

 changeTime: "1s",

 

 // 初始化方法,生成需要的星星,并调用需要的方法

 init () {

 var html = "";

 // 循环生成星星

 for (var i = 0; i < this.starNum; i++) {

 html += "<p class=&#39;star&#39; id=&#39;star" + i + "&#39;></p>";

 }

 // 拼接到 元素wrapper 中

 document.querySelector(".wrapper").innerHTML += html;

 

 // 调用 星星分散 的方法

 this.disperse();

 

 // 调用 星星聚合连成线 的方法

 this.combine();

 },

 disperse () {

 // 这个that 保存的是 starrySky 对象

 var that = this;

 

 // 获取 元素wrapper 的宽度

 var width = document.querySelector(&#39;.wrapper&#39;).offsetWidth;

 // 获取 元素wrapper 的高度

 var height = document.querySelector(&#39;.wrapper&#39;).offsetHeight;

 // 循环,开始在元素wrapper 区域内,生成规定数量的 星星,

 for (var i = 0; i < that.starNum; i++) {

 // 星星的 top值,0 ~ 元素wrapper 高度的随机数

 var top = Math.trunc(height * Math.random());

 // 星星的 left值,0 ~ 元素wrapper 宽度的随机数

 var left = Math.trunc(width * Math.random());

 // 星星的大小,调用 starrySky对象的starSize()方法

 var size = that.starSize();

 // 设置分散时每个星星样式

 document.querySelector("#star" + i).style.cssText += `

   top:${top}px;

   left:${left}px;

   width:${size}px;

   height:${size}px;

   background:${that.starColor};

   opacity:${Math.random()};

   border-radius:50%;

   animation:blink 1s ${Math.random() * 2}s infinite alternate;

   `;

 }

 },

 combine () {

 // 这个that 保存的是 starrySky 对象

 var that = this;

 // 查找导航栏 里所有的 a元素,遍历他们,每个都绑定上 鼠标进入 和 鼠标移出 事件

 document.querySelectorAll(".nav li a").forEach(function (item) {

 item.addEventListener("mouseover", function (e) {

 // 这里的this 是触发事件的当前节点对象,就是鼠标进入时候的 a元素

 // 当前a元素的宽度 / 星星数 = 最后连成线时,星星的宽度

 var width = this.offsetWidth / that.starNum;

 // 遍历,为每个星星修改样式,开始连成线

 for (var i = 0; i < that.starNum; i++) {

  // 星星的top 值就是,当前a元素的距离顶部的值 + 当前a元素的高度

  var top = this.offsetTop + this.offsetHeight;

  // 星星的left 值就是,当前a元素的距离左边界的值 + 第i个星星 * 星星的宽度

  var left = this.offsetLeft + i * width

  // 设置每个星星连成线时的样式

  document.querySelector("#star" + i).style.cssText += `

     width:${width}px;

     top:${top}px;

     left:${left}px;

     height:${that.lineHeight};

     background:${that.lineColor};

     opacity:1;

     border-radius:0;

     transition:${that.changeTime};

     animation:blink 1s infinite alternate;

    `;

 }

 });

 // 鼠标移出 调用 星星分散 的方法

 item.addEventListener("mouseout", function () {

 that.disperse();

 });

 }

 );

 },

 

}

// 调用 starrySky对象的 init方法,实现满天星效果

starrySky.init();

</script>

 </body>

</html>

登入後複製

注意:如果需要修改樣式,不要把nav元素和nav 裡面的li元素,給定位了,因為最後線的位置是根據a元素的offsetHeight 和offsetLeft 定位的,如果nav元素和nav 裡面的li元素定位了,會改變a元素的offsetParent元素,位置就不對了。

對offsetHeight、offsetLeft 和offsetParent 不理解的點這裡:https://codepen.io/FEWY/pen/MQdoWX

總結

實現這個效果,就是做了一個starrySky對象,定義好一些必須的屬性,主要靠disperse() 和combine() 兩個方法,需要星星分散的時候調用disperse(),需要星星連成線的時候呼叫combine(),好的就這樣了。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

淺談vue.js導入css庫(elementUi)的方法

使用JS程式碼製作二維碼並且產生功能(詳細教學)

使用vue及element元件的安裝教學(詳細教學)

以上是JavaScript滿天星導航列實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板