练习4_猫眼电影.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_7d5k4ej4p9u.css">
  8. <style>
  9. /* css reset */
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. li {
  15. list-style: none;
  16. }
  17. /* 头部区域 开始 */
  18. .top-fixed{
  19. position: fixed;
  20. top: 0;
  21. left: 0;
  22. width: 100%;
  23. }
  24. .fixed-content .top-fixed header {
  25. height: 1rem;
  26. width: 100%;
  27. background-color: #e54847;
  28. font-size: 0.3rem;
  29. color: #fff;
  30. position: relative;
  31. line-height: 1rem;
  32. text-align: center;
  33. }
  34. .fixed-content .top-menu {
  35. position: absolute;
  36. right: 10px;
  37. top: 0;
  38. }
  39. .top-menu .menu-box{
  40. position: absolute;
  41. top: 1rem;
  42. right: .2rem;
  43. width: 110px;
  44. background-color: #fff;
  45. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  46. z-index: 10;
  47. display: none;
  48. }
  49. .top-menu .menu-box li{
  50. font-size: .3rem;
  51. height: 1rem;
  52. line-height: 1rem;
  53. text-align: center;
  54. color: #666;
  55. border-bottom: 1px solid #999;
  56. }
  57. .fixed-content .top-menu i {
  58. font-size: 30px;
  59. }
  60. /* 头部区域 结束 */
  61. /* 导航区域 开始 */
  62. .nav-left .arr {
  63. display: block;
  64. width: 0;
  65. height: 0;
  66. border-right: 5px solid rgba(0, 0, 0, 0);
  67. border-left: 5px solid rgba(0, 0, 0, 0);
  68. border-bottom: 5px solid rgba(0, 0, 0, 0);
  69. border-top: 5px solid #b0b0b0;
  70. }
  71. nav {
  72. background-color: #fff;
  73. font-size: 0.3rem;
  74. display: flex;
  75. justify-content: space-between;
  76. height: 1rem;
  77. line-height: 1rem;
  78. padding: 0 .2rem;
  79. border-bottom: .02rem solid #e6e6e6;
  80. }
  81. nav .nav-center ul {
  82. display: flex;
  83. }
  84. .nav-left {
  85. display: flex;
  86. }
  87. .nav-left span {
  88. font-size: .28rem;
  89. color: #b0b0b0;
  90. }
  91. .nav-left .arr {
  92. margin-top: .5rem;
  93. }
  94. .nav-center {
  95. font-size: .3rem;
  96. color: #666;
  97. font-weight: 700;
  98. position: relative;
  99. }
  100. .nav-center .active{
  101. color: #111;
  102. font-size: .35rem;
  103. }
  104. .nav-center .tab-line {
  105. position: absolute;
  106. bottom: .08rem;
  107. left: .24rem;
  108. width: .5rem;
  109. height: .06rem;
  110. background-color: #e54847;
  111. border-radius: 1px;
  112. transition: all .1s ease;
  113. }
  114. .nav-center li {
  115. margin: 0 10px;
  116. }
  117. .nav-right .iconfont {
  118. font-size: .5rem;
  119. color: #e54847;
  120. font-weight: bold;
  121. }
  122. /* 导航区域 结束 */
  123. /* 底部导航区域 开始 */
  124. footer{
  125. height: 1rem;
  126. width: 100%;
  127. border-top: .01rem solid #d8d8d8;
  128. position: fixed;
  129. bottom: 0;
  130. left: 0;
  131. background-color: #fff;
  132. }
  133. footer ul{
  134. display: flex;
  135. justify-content: space-around;
  136. }
  137. footer ul li{
  138. font-size: .2rem;
  139. color: #696969;
  140. text-align: center;
  141. padding-top: .1rem;
  142. }
  143. footer li .iconfont{
  144. font-size: .5rem;
  145. }
  146. footer .active{
  147. color: #f03d37;
  148. }
  149. /* 底部导航区域 结束 */
  150. .scroll-content{
  151. height: 500vh;
  152. background-color: blue;
  153. }
  154. </style>
  155. </head>
  156. <body>
  157. <div class="app">
  158. <!-- 顶部导航及底部导航区域 -->
  159. <div class="fixed-content">
  160. <div class="top-fixed">
  161. <!-- 头部区域 开始 -->
  162. <header>
  163. <span>猫眼电影</span>
  164. <div class="top-menu">
  165. <i id="menu-btn" class="iconfont icon-ego-menu"></i>
  166. <div class="menu-box" style="display: none;">
  167. <ul>
  168. <li>首页</li>
  169. <li>榜单</li>
  170. <li>热点</li>
  171. <li>商城</li>
  172. </ul>
  173. </div>
  174. </div>
  175. </header>
  176. <!-- 头部区域 结束 -->
  177. <!-- 导航区域 开始 -->
  178. <nav>
  179. <div class="nav-left">
  180. <span>北京</span>
  181. <i class="arr"></i>
  182. </div>
  183. <div class="nav-center">
  184. <ul>
  185. <li data-l="0.24" class="active">热映</li>
  186. <li data-l="1.24">影院</li>
  187. <li data-l="2.24">待映</li>
  188. </ul>
  189. <div class="tab-line"></div>
  190. </div>
  191. <div class="nav-right">
  192. <i class="iconfont icon-search"></i>
  193. </div>
  194. </nav>
  195. <!-- 导航区域 结束 -->
  196. </div>
  197. <footer>
  198. <ul>
  199. <li class="active">
  200. <i class="iconfont icon-dianying"></i>
  201. <p>电影</p>
  202. </li>
  203. <li>
  204. <i class="iconfont icon-shipin"></i>
  205. <p>视频</p>
  206. </li>
  207. <li>
  208. <i class="iconfont icon-yanchu"></i>
  209. <p>演出</p>
  210. </li>
  211. <li>
  212. <i class="iconfont icon-wode"></i>
  213. <p>我的</p>
  214. </li>
  215. </ul>
  216. </footer>
  217. </div>
  218. <!-- 滚动区域 内容区域 -->
  219. <div class="scroll-content"></div>
  220. </div>
  221. <script src="./js/rem.js"></script>
  222. <script>
  223. // 获取元素
  224. // 菜单按钮
  225. var oMenuBtn = document.querySelector("#menu-btn");
  226. // 获取菜单容器
  227. var oMenuBox = document.querySelector(".menu-box");
  228. // 获取顶部导航按钮
  229. var aNav = document.querySelectorAll(".nav-center li")
  230. // 获取导航底部横线
  231. var oTabLine = document.querySelector(".tab-line");
  232. // 获取底部导航按钮
  233. var tabBtn = document.querySelectorAll("footer ul li");
  234. // 菜单点击事件
  235. oMenuBtn.addEventListener("touchstart",function(){
  236. // 获取当前菜单显示的状态
  237. var menuMode = oMenuBox.style.display;
  238. if(menuMode == "none"){
  239. oMenuBox.style.display = "block";
  240. }else {
  241. oMenuBox.style.display = "none";
  242. }
  243. })
  244. // 顶部导航点击事件
  245. for(var i=0;i<aNav.length;i++){
  246. aNav[i].addEventListener("touchstart",function(){
  247. // 先移除所有选中状态
  248. for(var j=0;j<aNav.length;j++){
  249. aNav[j].classList.remove("active");
  250. }
  251. // 给当前点击的元素添加选中状态
  252. this.classList.add("active");
  253. // 移动tab-line
  254. oTabLine.style.left = this.dataset.l + "rem";
  255. })
  256. }
  257. // 底部导航按钮事件
  258. for(var i=0;i<tabBtn.length;i++){
  259. tabBtn[i].addEventListener("touchstart",function(){
  260. // 先移除所有导航按钮的选中状态
  261. for(var j=0;j<tabBtn.length;j++){
  262. tabBtn[j].classList.remove("active");
  263. }
  264. // 给当前点击的元素添加选中状态
  265. this.classList.add("active");
  266. })
  267. }
  268. </script>
  269. </body>
  270. </html>