用原生JS实现爱奇艺首页导航栏代码实例
更新时间:2019年09月19日 14:50:01 作者:袁艺明
这篇文章主要介绍了用原生JS实现爱奇艺首页导航栏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
最近接到领导的任务,要给外面的学生上几节前端课,备课的时候准备了一些小项目,在此记录一下。
以下是爱奇艺首页的一个导航栏,用原生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 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 | <html> <head> <title>爱奇艺</title> <meta charset= "utf-8" > <style type= "text/css" > * { padding: 0; margin: 0; } .wrap { height: 520px; background-color: #000; width: 100%; } .wrap .img-wrap { height: 100%; margin: 0 auto; background-image: url( '1.jpg' ); background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 100%; position: relative; } /* 媒体查询 */ @media screen and (max-width: 2000px) { .wrap .img-wrap .item-list { right: 10%; } } @media screen and (max-width: 1600px) { .wrap .img-wrap .item-list { right: 8%; } } @media screen and (max-width: 1300px) { .wrap .img-wrap .item-list { right: 5%; } } .wrap .img-wrap .item-list { box-sizing: border-box; height: 100%; background-color: rgba(0,0,0,0.7); width: 280px; position: absolute; list-style: none; padding: 10px 0; } .wrap .img-wrap .item-list li { padding: 0 15px; } .wrap .img-wrap .item-list li.active { /*background-color: -webkit-linear-gradient(left, rgba(0,0,0,.3), rgba(0,0,0,0.1));*/ background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0)); cursor: pointer; } .wrap .img-wrap .item-list li span { line-height: 40px; color: #eee; font-size: 16px; } .wrap .img-wrap .item-list li.active span { color: #00be06; display: block; } .wrap .img-wrap .item-list li.active span:nth-child(1) { font-size: 24px; transition: font-size 0.2s; } .wrap .img-wrap .item-list li.active span:nth-child(2) { display: none; } </style> </head> <body> <div class= "wrap" > <div class= "img-wrap" > <ul class= "item-list" > </ul> </div> </div> <script type= "text/javascript" > let items = [ { title: '遇见幸福' , desc: '24点体会人生百味' , url: '1.jpg' }, { title: '中国达人秀' , desc: '真假岳岳在线劈叉' , url: '2.jpg' }, { title: '中国新说唱' , desc: '全国4强诞生!' , url: '3.jpg' }, { title: '做家务' , desc: '魏大勋花钱做音乐' , url: '4.jpg' }, { title: '扫毒2' , desc: '刘德华硬战古天乐' , url: '5.jpg' }, { title: '加油' , desc: '郝泽宁隔屏告白福子' , url: '6.jpg' }, { title: '小欢喜' , desc: '宋倩乔卫东重归于好' , url: '7.jpg' }, { title: '谋爱上瘾' , desc: '契约夫妇遇感情危机' , url: '8.jpg' }, { title: '此食此客' , desc: '啤酒花蛤夏日绝配' , url: '9.jpg' }, { title: '爱奇艺特别策划' , desc: '我们的70年' , url: '10.jpg' } ]; // 需要展示的数据,通常从后端获取 let curIndex = 0; // 当前索引 let isAutoMove = true ; // 是否可以自动改变图片 let interval = 1000; // 自动轮播的间隔时间 // 封装函数:生成新的标签 function createTag(tag) { return document.createElement(tag); } // 封装函数:生成文本节点 function createText(text) { return document.createTextNode(text); } // 封装函数:初始化列表 function initItemList() { let ul = document.getElementsByClassName( 'item-list' )[0]; for (let i = 0; i < items.length; i++) { let li = createTag( 'li' ); if (i == 0) { li.classList.add( 'active' ) } let span1 = createTag( 'span' ); let span2 = createTag( 'span' ); let span3 = createTag( 'span' ); let text1 = createText(items[i].title); let text2 = createText( ':' ); let text3 = createText(items[i].desc); span1.appendChild(text1); span2.appendChild(text2); span3.appendChild(text3); li.appendChild(span1); li.appendChild(span2); li.appendChild(span3); ul.appendChild(li); addHoverListener(li, i); } } // 鼠标hover右侧栏时改变背景图片及文字样式 function addHoverListener(trigger, index) { trigger.addEventListener( 'mouseenter' , function () { curIndex = index; // 保存当前索引 changeImage(); activeText(); }); } // 根据index改变背景图片 function changeImage() { console.log( 'curIndex: ' , curIndex); let imgUrl = items[curIndex].url; let imgWrap = document.getElementsByClassName( 'img-wrap' )[0]; imgWrap.style.cssText = "background-image: url('" + imgUrl + "')" ; } // 根据index改变右侧激活文本的样式 function activeText() { let activeObj = document.getElementsByClassName( 'active' )[0]; let li = document.getElementsByTagName( 'li' )[curIndex]; if (activeObj) { activeObj.classList.remove( 'active' ); } li.classList.add( 'active' ); } // 鼠标移入移出wrap区域时响应关闭、开启自动轮播 function addEnterListener() { let wrap = document.getElementsByClassName( 'wrap' )[0]; wrap.addEventListener( 'mouseenter' , function () { isAutoMove = false ; }); wrap.addEventListener( 'mouseleave' , function () { isAutoMove = true ; }); } // 定时切换图片:使用定时器setInterval(function(){}, time) function autoMove() { let timer = setInterval( function () { if (isAutoMove) { if (curIndex < 9) { curIndex ++; } else { curIndex = 0; } changeImage(); activeText(); } }, interval); } window.onload = function () { initItemList(); addEnterListener(); autoMove(); } </script> </body> </html> |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论