用原生JS实现爱奇艺首页导航栏

 

以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下:

 

 

代码如下:

  1 <html>
  2 <head>
  3     <title>爱奇艺</title>
  4     <meta charset="utf-8">
  5     <style type="text/css">
  6         * {
  7             padding: 0;
  8             margin: 0;
  9         }
 10         .wrap {
 11             height: 520px;
 12             background-color: #000;
 13             width: 100%;
 14         }
 15         .wrap .img-wrap {
 16             height: 100%;
 17             margin: 0 auto;
 18             background-image: url('1.jpg');
 19             background-repeat: no-repeat;
 20             background-position: 50% 50%;
 21             background-size: auto 100%;
 22             position: relative;
 23         }
 24         /* 媒体查询 */
 25         @media screen and (max-width: 2000px) {
 26             .wrap .img-wrap .item-list {
 27                 right: 10%;
 28             }
 29         }
 30         @media screen and (max-width: 1600px) {
 31             .wrap .img-wrap .item-list {
 32                 right: 8%;
 33             }
 34         }
 35         @media screen and (max-width: 1300px) {
 36             .wrap .img-wrap .item-list {
 37                 right: 5%;
 38             }
 39         }
 40         .wrap .img-wrap .item-list {
 41             box-sizing: border-box;
 42             height: 100%;
 43             background-color: rgba(0,0,0,0.7);
 44             width: 280px;
 45             position: absolute;
 46             
 47             list-style: none;
 48             padding: 10px 0;
 49         }
 50         .wrap .img-wrap .item-list li {
 51             padding: 0 15px;
 52         }
 53         .wrap .img-wrap .item-list li.active {
 54             /*background-color: -webkit-linear-gradient(left, rgba(0,0,0,.3), rgba(0,0,0,0.1));*/
 55             background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0));
 56             cursor: pointer;
 57         }
 58         .wrap .img-wrap .item-list li span {
 59             line-height: 40px;
 60             color: #eee;
 61             font-size: 16px;
 62         }
 63         .wrap .img-wrap .item-list li.active span {
 64             color: #00be06;
 65             display: block;
 66         }
 67         .wrap .img-wrap .item-list li.active span:nth-child(1) {
 68             font-size: 24px;
 69             transition: font-size 0.2s;
 70         }
 71         .wrap .img-wrap .item-list li.active span:nth-child(2) {
 72             display: none;
 73         }
 74     </style>
 75 </head>
 76 <body>
 77     <div class="wrap">
 78         <div class="img-wrap">
 79             <ul class="item-list">
 80             </ul>
 81         </div>
 82     </div>
 83     <script type="text/javascript">
 84         let items = [
 85                 {
 86                     title: '遇见幸福',
 87                     desc: '24点体会人生百味',
 88                     url: '1.jpg'
 89                 },
 90                 {
 91                     title: '中国达人秀',
 92                     desc: '真假岳岳在线劈叉',
 93                     url: '2.jpg'
 94                 },
 95                 {
 96                     title: '中国新说唱',
 97                     desc: '全国4强诞生!',
 98                     url: '3.jpg'
 99                 },
100                 {
101                     title: '做家务',
102                     desc: '魏大勋花钱做音乐',
103                     url: '4.jpg'
104                 },
105                 {
106                     title: '扫毒2',
107                     desc: '刘德华硬战古天乐',
108                     url: '5.jpg'
109                 },
110                 {
111                     title: '加油',
112                     desc: '郝泽宁隔屏告白福子',
113                     url: '6.jpg'
114                 },
115                 {
116                     title: '小欢喜',
117                     desc: '宋倩乔卫东重归于好',
118                     url: '7.jpg'
119                 },
120                 {
121                     title: '谋爱上瘾',
122                     desc: '契约夫妇遇感情危机',
123                     url: '8.jpg'
124                 },
125                 {
126                     title: '此食此客',
127                     desc: '啤酒花蛤夏日绝配',
128                     url: '9.jpg'
129                 },
130                 {
131                     title: '爱奇艺特别策划',
132                     desc: '我们的70年',
133                     url: '10.jpg'
134                 }
135         ];   // 需要展示的数据,通常从后端获取
136 
137         let curIndex = 0;   // 当前索引
138 
139         let isAutoMove = true;  // 是否可以自动改变图片
140         
141         let interval = 1000;  // 自动轮播的间隔时间
142 
143         // 封装函数:生成新的标签
144         function createTag(tag) {
145             return document.createElement(tag);
146         }
147 
148         // 封装函数:生成文本节点
149         function createText(text) {
150             return document.createTextNode(text);
151         }
152 
153         // 封装函数:初始化列表
154         function initItemList() {
155             let ul = document.getElementsByClassName('item-list')[0];
156             
157             for (let i = 0; i < items.length; i++) {
158                 let li = createTag('li');
159                 if (i == 0) { li.classList.add('active') }
160                 let span1 = createTag('span');
161                 let span2 = createTag('span');
162                 let span3 = createTag('span');
163                 let text1 = createText(items[i].title);
164                 let text2 = createText(':');
165                 let text3 = createText(items[i].desc);
166                 span1.appendChild(text1);
167                 span2.appendChild(text2);
168                 span3.appendChild(text3);
169 
170                 li.appendChild(span1);
171                 li.appendChild(span2);
172                 li.appendChild(span3);
173                 ul.appendChild(li);
174 
175                 addHoverListener(li, i);
176             } 
177         }
178 
179         // 鼠标hover右侧栏时改变背景图片及文字样式
180         function addHoverListener(trigger, index) {
181             trigger.addEventListener('mouseenter', function () {
182                 curIndex = index;   // 保存当前索引
183                 changeImage();
184                 activeText();
185             });
186         }
187 
188         // 根据index改变背景图片
189         function changeImage() {
190             console.log('curIndex: ', curIndex);
191             let imgUrl = items[curIndex].url;
192             let imgWrap = document.getElementsByClassName('img-wrap')[0];
193             imgWrap.style.cssText = "background-image: url('" + imgUrl + "')";
194         }
195         
196         // 根据index改变右侧激活文本的样式
197         function activeText() {
198             let activeObj = document.getElementsByClassName('active')[0];
199             let li = document.getElementsByTagName('li')[curIndex];
200             if (activeObj) {
201                 activeObj.classList.remove('active');
202             }
203             li.classList.add('active');
204         }
205 
206         // 鼠标移入移出wrap区域时响应关闭、开启自动轮播
207         function addEnterListener() {
208             let wrap = document.getElementsByClassName('wrap')[0];
209             wrap.addEventListener('mouseenter', function () {
210                 isAutoMove = false;
211             });
212             wrap.addEventListener('mouseleave', function () {
213                 isAutoMove = true;
214             });
215         }
216 
217         // 定时切换图片:使用定时器setInterval(function(){}, time)
218         function autoMove() {
219             let timer = setInterval(function () {
220                 if (isAutoMove) {
221                     if (curIndex < 9) {
222                         curIndex ++;
223                     } else {
224                         curIndex = 0;
225                     }
226                     changeImage();
227                     activeText();
228                 }
229             }, interval);
230         }
231 
232         window.onload = function () {
233             initItemList();
234             addEnterListener();
235             autoMove();
236         }
237     </script>
238 </body>
239 </html>
posted @ 2019-09-04 00:14  Yuan-yiming  阅读(1401)  评论(0编辑  收藏  举报