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