4-5 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

运用css和jQuery，实现导航菜单在右侧绝对定位显示，并且可以在滚动时根据滚动条的位置自动设置导航菜单的焦点。

温馨提示 : 完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

 

任务

一、静态网页的实现

1.运用CSS，让导航菜单在右侧绝对定位显示。

2.运用锚点，实现导航定位。

提示: 使用position属性。

 

二、jQuery实现定位导航特效

1.滚动条发生滚动时，要获取相应的值。

提示:先要获取到相应的scrollTop()、导航和当前所在的楼层。

 

2.实现让导航菜单在滚动条滚动的时候自动设置焦点

提示：这里遍历时需要对滚动条位置和每个元素位置做一个判断，并把相应的元素id值赋予currentId

 

3. 给相应楼层的 a 设置current，取消其他链接的current

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>地狗购物网——网页定位导航效果</title>
  6. <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         body {
  13.             font-size: 12px;
  14.             line-height: 1.7;
  15.         }
  16.  
  17.         li {
  18.             list-style: none;
  19.         }
  20.  
  21.         #content {
  22.             width: 800px;
  23.             margin: 0 auto;
  24.             padding: 20px;
  25.         }
  26.  
  27.         #content h1 {
  28.             color: #0088bb;
  29.         }
  30.  
  31.         #content .item {
  32.             padding: 20px;
  33.             margin-bottom: 20px;
  34.             border: 1px dotted #0088bb;
  35.         }
  36.  
  37.         #content .item h2 {
  38.             font-size: 16px;
  39.             font-weight: bold;
  40.             border-bottom: 2px solid #0088bb;
  41.             margin-bottom: 10px;
  42.         }
  43.  
  44.         #content .item li {
  45.             display: inline;
  46.             margin-right: 10px;
  47.         }
  48.  
  49.         #content .item li a img {
  50.             width: 230px;
  51.             height: 230px;
  52.             border: none;
  53.         }
  54.  
  55.  
  56. /*请补充此处代码，让导航菜单在右侧绝对定位显示*/
  57.  
  58.  
  59.         }
  60.  
  61.         #menu ul li a {
  62.             display: block;
  63.             margin: 5px 0;
  64.             font-size: 14px;
  65.             font-weight: bold;
  66.             color: #333;
  67.             width: 80px;
  68.             height: 50px;
  69.             line-height: 50px;
  70.             text-decoration: none;
  71.             text-align: center;
  72.         }
  73.  
  74.         #menu ul li a:hover,
  75.         #menu ul li a.current {
  76.             color: #fff;
  77.             background: #0088bb;
  78.         }
  79.  
  80.         /*ie6 hack*/
  81.         * html, * html body {
  82.             background-image: url(about:blank);
  83.             background-attachment: fixed;
  84.         }
  85.  
  86.         * html #menu {
  87.             /*position: fixed;*/
  88.             position: absolute;
  89.             top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
  90.         }
  91.  
  92. </style>
  93. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
  94. <script>
  95.  
  96.             //滚动条发生滚动时，要获取相应的值。
  97.  
  98.             //请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点
  99.  
  100.  
  101.             //给相应楼层的a 设置 current，取消其他链接的current
  102.  
  103. </script>
  104. </head>
  105. <body>
  106. <div id="menu">
  107. <ul>
  108. <!--运用锚点，实现导航定位。-->
  109.  
  110.  
  111. <li><a href="#" class="current">1F 男装</a></li>
  112. <li><a href="#">2F 女装</a></li>
  113. <li><a href="#">3F 美妆</a></li>
  114. <li><a href="#">4F 数码</a></li>
  115. <li><a href="#">5F 母婴</a></li>
  116. </ul>
  117. </div>
  118. <div id="content">
  119. <h1>地狗购物网</h1>
  120.  
  121. <div id="item1" class="item">
  122. <h2>1F 男装</h2>
  123. <ul>
  124. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  125. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  126. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  127. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  128. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  129. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  130. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  131. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  132. <li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
  133. </ul>
  134. </div>
  135. <div id="item2" class="item">
  136. <h2>2F 女装</h2>
  137. <ul>
  138. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  139. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  140. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  141. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  142. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  143. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  144. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  145. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  146. <li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
  147. </ul>
  148. </div>
  149. <div id="item3" class="item">
  150. <h2>3F 美妆</h2>
  151. <ul>
  152. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  153. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  154. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  155. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  156. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  157. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  158. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  159. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  160. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
  161. </ul>
  162. </div>
  163. <div id="item4" class="item">
  164. <h2>4F 数码</h2>
  165. <ul>
  166. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  167. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  168. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  169. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  170. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  171. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  172. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  173. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  174. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
  175. </ul>
  176. </div>
  177. <div id="item5" class="item">
  178. <h2>5F 母婴</h2>
  179. <ul>
  180. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  181. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  182. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  183. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  184. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  185. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  186. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  187. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  188. <li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
  189. </ul>
  190. </div>
  191. </div>
  192. </body>
  193. </html>
下一节