當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
生活随笔
收集整理的這篇文章主要介紹了
云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、語言和環境
二、題目（100分）
1、功能需求：
- 布局出頂部導航欄目
- 鼠標放到新手入門顯示對象的下拉列表
- 鼠標移開時隱藏下拉列表
2、效果如 圖 1 所示：
?
圖1 ??運行效果截圖??????????
?
3、推薦實現步驟
三、提交方式
文件以壓縮包提交, 壓縮包文件命名方式 :學號+班級+中文名字.zip, 中間不要”+”號 比如: /192102026記網2班楊明金.zip，壓縮包必需在按規定的時間以內, 按監考老師的要求提交.
?
四、評分標準
| 題目：購物車結算管理 | |||
| 該程序評分標準如下： | |||
| 20 | 項目搭建和代碼結構是否正確 | ||
| ? | 5 | 項目正確搭建 | |
| ? | 5 | 正確按要求定義變量（變量的命名） | |
| ? | 10 | 合理的項目名稱及相關頁面和css、js的命名及代碼規范 | |
| 20 | 布局出頁面效果 | ||
| ? | 10 | 正確定位圖片 | |
| ? | 10 | 顯示合理的間距 | |
| 20 | 鼠標事件 | ||
| ? | 10 | 鼠標移入顯示 | |
| ? | 10 | 鼠標移出隱藏 | |
| 40 | 總體編程技術 | ||
| ? | 5 | 程序邏輯分明，有一定注釋 | |
| ? | 5 | 變量命名符合規范，可讀性好，編碼書寫有縮進 | |
| ? | 30 | 按照要求使用js或jQuery完成要求的效果 | |
| 總分 | 100分 | ||
?
五、實現代碼
HTML：
<div id="top"><!-- 導航欄的左邊 --><div class="top_left"><span>您好，歡迎光臨蔚藍網！</span><span>[<a href="#">登錄</a>][<a href="#">免費注冊</a>]</span></div><!-- 導航欄的右邊 --><div class="top_right"><ul><li><a href="#"><img src="img/shoppingTrolley.png " >購物車</a></li><li>|</li><li><a href="#">我的賬戶</a></li><li>|</li><li><a href="#">我的訂單</a></li><li>|</li><li><a href="#">禮品卡</a></li><li>|</li><li id="xsrm_ul"><a href="#" >新手入門</a><select id="xsrm"></select><ul class="xsrm"><li><a href="#">購物保障</a></li><li><a href="#">購物流程</a></li><li><a href="#">會員介紹</a></li><li><a href="#">常見問題</a></li></ul></li><li>|</li><li>客戶服務</li></ul></div></div>css：
*{margin: 0;padding: 0;}a{color: black;text-decoration: none;}/* 整個導航欄樣式 */#top{width: 100%;height: 50px;margin: 0 auto;line-height: 50px;background-color: aqua;}/* 導航欄左邊 */.top_left{margin-left: 10%;float: left;}.top_left a:hover{color: blue;}/* 導航欄右邊 */.top_right{margin-right: 10%;float: right;}.top_right>ul>li{list-style: none;float: left;margin-left: 15px;}.top_right img{width: 30px ;height: 30px ;line-height: 50px;}/* 新手入門,選項 */.xsrm{display: none;text-align: center;list-style: none;}.xsrm li{border: solid 1px;JS：
var xsrm_ul = document.getElementById("xsrm_ul");var xsrm = document.getElementsByClassName("xsrm");// 鼠標移入事件xsrm_ul.onmouseover = function(){xsrm[0].style.display="block";};// 鼠標移出時間xsrm_ul.onmouseout = function(){xsrm[0].style.display="none";};使用jQuery的hover事件實現：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用hover事件$("#xsrm_ul").hover(function(){ /* 鼠標移入時觸發 */$(".xsrm:eq(0)").css('display','block');},function(){ /* 鼠標移出時觸發 */$(".xsrm:eq(0)").css('display','none');});});</script>使用jQuery鼠標移入移出事件：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用鼠標移入事件$("#xsrm_ul").mouseover(function(){$(".xsrm:first").css('display','block');});// 使用鼠標移出事件$("#xsrm_ul").mouseout(function(){$(".xsrm:first").css('display','none');});});</script>完整代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style type="text/css">*{margin: 0;padding: 0;font-size: 1rem;}a{color: black;text-decoration: none;}a:hover,span:hover{color: red;font-weight: 600;}/* 整個導航欄樣式 */#top{width: 100vw;height: 50px;margin: 0 auto;line-height: 50px;background-color: aqua;}/* 導航欄左邊 */.top_left{margin-left: 10%;float: left;}.top_left a:hover{color: blue;}/* 導航欄右邊 */.top_right{margin-right: 10%;float: right;}.top_right>ul>li{list-style: none;float: left;margin-left: 15px;}.top_right img{width: 30px ;height: 30px ;line-height: 50px;}/* 新手入門,選項 */.xsrm{display: none;text-align: center;list-style: none;}.xsrm li{border: solid 1px;</style></head><body><div id="top"><!-- 導航欄的左邊 --><div class="top_left"><span>您好，歡迎光臨蔚藍網！</span><span>[<a href="#">登錄</a>][<a href="#">免費注冊</a>]</span></div><!-- 導航欄的右邊 --><div class="top_right"><ul><li><a href="#"><img src="img/shoppingTrolley.png " >購物車</a></li><li>|</li><li><a href="#">我的賬戶</a></li><li>|</li><li><a href="#">我的訂單</a></li><li>|</li><li><a href="#">禮品卡</a></li><li>|</li><li id="xsrm_ul"><a href="#" >新手入門</a><select id="xsrm"></select><ul class="xsrm"><li><a href="#">購物保障</a></li><li><a href="#">購物流程</a></li><li><a href="#">會員介紹</a></li><li><a href="#">常見問題</a></li></ul></li><li>|</li><li><a href="#">客戶服務</a></li></ul></div></div><!-- 導入jQuery --><!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){// 使用hover事件$("#xsrm_ul").hover(function(){ /* 鼠標移入時觸發 */$(".xsrm:eq(0)").css('display','block');},function(){ /* 鼠標移出時觸發 */$(".xsrm:eq(0)").css('display','none');});// 使用鼠標移入事件$("#xsrm_ul").mouseover(function(){$(".xsrm:first").css('display','block');});// 使用鼠標移出事件$("#xsrm_ul").mouseout(function(){$(".xsrm:first").css('display','none');});});</script> --><script type="text/javascript">var xsrm_ul = document.getElementById("xsrm_ul");var xsrm = document.getElementsByClassName("xsrm");// 鼠標移入事件xsrm_ul.onmouseover = function(){xsrm[0].style.display="block";};// 鼠標移出時間xsrm_ul.onmouseout = function(){xsrm[0].style.display="none";};</script></body> </html>總結
以上是生活随笔為你收集整理的云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server 2019下载及安装
- 下一篇： SpringBoot 获取 Yml 配置