如何使用wheelnav.js構(gòu)建酷炫的動(dòng)態(tài)導(dǎo)航菜單
前言
用戶體驗(yàn)永遠(yuǎn)是一個(gè)值得探討的問題，同時(shí)也是應(yīng)該在平時(shí)的研發(fā)工作工作中作為重點(diǎn)關(guān)注的地方。使用習(xí)慣，界面的布局，用戶點(diǎn)擊操作的系統(tǒng)反應(yīng)情況，都會(huì)給使用者帶來很大的沖擊。關(guān)于用戶體驗(yàn)的設(shè)計(jì)，尤其以吸引用戶，在應(yīng)用上做更多的停留。需要我們的界面設(shè)計(jì)者花更多的心思。本文無意于過多的講解如何進(jìn)行用戶體驗(yàn)的設(shè)計(jì)。用戶體驗(yàn)只是我們所有的工程師共同去努力提升。
上圖是一個(gè)非常有趣的百科歷史類的網(wǎng)站全歷史，這里的關(guān)系圖譜是動(dòng)態(tài)支持旋轉(zhuǎn)的，非常有意思。根據(jù)人物不同的維度，比如以上述的歷史人物詹天佑為例，從人物的7個(gè)方面去描述，分別包括成就、友情、工作、地點(diǎn)、影響、經(jīng)歷、歸屬。這相當(dāng)于人物的7個(gè)方面，就像知識圖譜中的一些關(guān)系，更妙的是，在功能界面上，用戶可以在選擇不同的維度之后，右邊的界面會(huì)跟隨左邊的維度來自動(dòng)切換，完全是一種動(dòng)態(tài)的導(dǎo)航菜單。
本文即在上述的場景中，主要介紹一種基于SVG的web動(dòng)態(tài)導(dǎo)航組件。通過這個(gè)組件可以實(shí)現(xiàn)很多豐富酷炫的效果。首先介紹這款wheelnav.js的相關(guān)知識，然后結(jié)合代碼講解如何在html頁面中創(chuàng)建其對象，接著講解wheelnav的一些屬性和方法，最后給出基于wheelnav的實(shí)際成果。如果您目前也有類似的需求，不妨來這里看看，或許能提供一些參考。
一、WheelNav是什么
wheelnav.js 是一個(gè)基于 SVG 的動(dòng)態(tài)導(dǎo)航菜單組件。它可以是一個(gè)派菜單（徑向菜單，循環(huán)菜單），選項(xiàng)卡導(dǎo)航，自菜單，選項(xiàng)按鈕，復(fù)選框等等。
使用wheelnav可以實(shí)現(xiàn)以下效果：
（1）創(chuàng)建圓形導(dǎo)航：輕松地創(chuàng)建一個(gè)基于圓形的導(dǎo)航菜單，其中每個(gè)菜單項(xiàng)都是圓形上的一個(gè)點(diǎn)或扇區(qū)。
（2）高度可定制：自定義每個(gè)菜單項(xiàng)的顏色、形狀、大小、位置、標(biāo)簽、工具提示等。
（3）交互性：添加點(diǎn)擊、懸停和拖動(dòng)事件，以便用戶與導(dǎo)航菜單進(jìn)行交互。
（4）動(dòng)畫效果：為菜單項(xiàng)添加動(dòng)畫效果，如漸變、旋轉(zhuǎn)、縮放等，以增強(qiáng)用戶體驗(yàn)。
（5）響應(yīng)式設(shè)計(jì)：調(diào)整導(dǎo)航菜單以適應(yīng)不同屏幕尺寸和設(shè)備類型，確保在各種設(shè)備上都能良好地顯示和工作。
（6）集成應(yīng)用：由于 wheelnav.js 是一個(gè)輕量級的庫，因此可以輕松地集成到現(xiàn)有的 HTML、CSS 和 JavaScript 項(xiàng)目中。
1、項(xiàng)目地址
本節(jié)將介紹這個(gè)庫的開源地址。如果大家可以正常訪問到github的話，可以在github中找到其源碼，github源碼地址。如果訪問不是很流程，大家在國內(nèi)的gitee上訪問也是可以的。也有技術(shù)人員在上面會(huì)自動(dòng)同步相應(yīng)的庫。相關(guān)資源可以問問度娘。下面以github為例，說明：
2、關(guān)于開源協(xié)議
開源協(xié)議是用于規(guī)范使用開源項(xiàng)目的一種協(xié)議，因此我們在使用開源項(xiàng)目的時(shí)候一定要非常注意，作為一個(gè)技術(shù)人，要尊重作者，尊重開源，把生態(tài)圈共同維護(hù)好。wheelnav采用的是寬松的MIT協(xié)議，對使用方?jīng)]有任何限制。
The MIT License (MIT) Copyright (c) 2014-2021 Gábor Berkesi (https://softwaretailoring.net) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
3、相關(guān)目錄介紹
把上面的開源項(xiàng)目clone到本地之后，打開目錄可以看到以下信息：
其中，在這個(gè)文件夾下面包含了js腳本文件、css樣式文件以及一些實(shí)例程序，還有一些對于工程的配套說明文件。 這里不再進(jìn)行贅述。下面結(jié)合源碼對其實(shí)現(xiàn)進(jìn)行講解。
二、如何使用wheelnav.js
在我們將相關(guān)的源碼下載到本地之后，即將開始我們的學(xué)習(xí)之旅。在這個(gè)過程當(dāng)中，我們將學(xué)會(huì)如何創(chuàng)建一個(gè)動(dòng)態(tài)的導(dǎo)航按鈕，以及實(shí)現(xiàn)具體的切換效果。掌握一些基礎(chǔ)的參數(shù)設(shè)置方法。
1、新建html頁面
作為一款前端的javascript組件，要想在界面上展現(xiàn)出來。一定少不了web組件，也就是html的支持。因此在進(jìn)行wheelnav組件的使用之前，必須要?jiǎng)?chuàng)建一個(gè)html界面。關(guān)鍵代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Welcome by wheelnav.js">
<meta name="author" content="gabor.berkesi@softwaretailoring.net">
<link rel="shortcut icon" rel="external nofollow" >
<title>wheelnav.js - 歡迎使用</title>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="raphael.min.js"></script>
<script type="text/javascript" src="raphael.icons.min.js"></script>
<!--
<script type="text/javascript" src="wheelnav.min.js"></script>
-->
<script type="text/javascript" src="wheelnav.js"></script>
</head>
<body>
<header>
<p>
歡迎使用 <a rel="external nofollow" target="_blank">wheelnav.js</a>
</p>
</header>
<div id="wheelDiv"></div>
<footer>
<p>© 2014-2021 <a rel="external nofollow" target="_blank">softwaretailoring.net</a></p>
</footer>
</body>
</html>2、設(shè)置style樣式
在定義好了html展現(xiàn)要素之后，還要設(shè)置具體的樣式，讓界面變得更加好看。關(guān)鍵代碼如下：
<style>
body {
background-color: #E7E7E7;
font-family: Helvetica, Arial, sans-serif;
}
header {
font-size: x-large;
text-align: center;
background-color: #555;
color: #ddd;
padding: 5px;
font-family: Helvetica, sans-serif;
margin-bottom: 50px;
}
header a {
background-color: #ddd;
color: #555;
text-decoration: none;
padding: 0 3px 0 3px;
}
header a:hover {
background-color: #555;
color: #ddd;
text-decoration: underline;
}
footer {
text-align: center;
background-color: #555;
color: #ddd;
padding: 5px;
margin-top: 50px;
}
footer a {
background-color: #ddd;
color: #555;
text-decoration: none;
padding: 0 3px 0 3px;
}
footer a:hover {
background-color: #555;
color: #ddd;
text-decoration: underline;
}
#wheelDiv {
height: 400px;
width: 400px;
margin: auto;
}
#wheelDiv>svg {
height: 100%;
width: 100%;
}
@media (max-width: 600px) {
#wheelDiv {
height: 350px;
width: 350px;
}
}
@media (max-width: 400px) {
#wheelDiv {
height: 300px;
width: 300px;
}
}
/* Insert generated CSS code from here -> https://pmg.softwaretailoring.net */
</style>3、創(chuàng)建展示元素實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航
在引入了wheelnav組件之后，除了創(chuàng)建展示元素，設(shè)置渲染屬性，還需要將wheelnav對象出來。下面以代碼的形式主要講解如何創(chuàng)建wheelnav組件。
<script type="text/javascript">
window.onload = function () {
var wheel = new wheelnav("wheelDiv");
wheel.titleCurved = true;
wheel.titleCurvedClockwise = true;
wheel.createWheel(["主題一", "主題二", "主題三", icon.fave, "主題四", "主題五"]);
wheel.navigateWheel(1);
};
</script>這里通過new wheelnav("wheelDiv")。將動(dòng)態(tài)組件綁定到div中。然后設(shè)置它的參數(shù)，每個(gè)導(dǎo)航菜單還有設(shè)置默認(rèn)的菜單項(xiàng)。以上即完成了最簡單的示例。你應(yīng)該掌握它的最基本用法。
三、參數(shù)即方法介紹
為了方便大家了解wheelnav組件，這里將對這個(gè)組件的參數(shù)的方法進(jìn)行相應(yīng)的介紹。首先介紹這款組件的基本參數(shù)，然后再介紹這款組件的一些方法。
1、參數(shù)列表
關(guān)于wheelnav組件的參數(shù)，可以在wheelnav.js這個(gè)組件的源碼中找到?？梢允褂梦谋竟ぞ呖匆幌略创a：
this.holderId = "wheel";
var holderDiv = document.getElementById(divId);
//Prepare raphael object and set the width
var canvasWidth;
var clearContent = true;
if (raphael === undefined ||
}
else {
//The divId parameter has to be the identifier of the wheelnav in this case.
this.raphael = raphael;
canvasWidth = this.raphael.width;
clearContent = false;
}
//Public properties
this.centerX = canvasWidth / 2;
this.centerY = canvasWidth / 2;
this.wheelRadius = canvasWidth / 2;
this.navAngle = 0;
this.sliceAngle = null;
this.titleRotateAngle = null;
this.titleCurved = false;
this.titleCurvedClockwise = null;
this.titleCurvedByRotateAngle = false;
this.initTitleRotate = false;
this.selectedNavItemIndex = 0;
this.hoverEnable = true;
this.hoveredToFront = true;
this.navItemCount = 0;
this.navItemCountLabeled = false;
this.navItemCountLabelOffset = 0;
this.navItems = [];
this.navItemsEnabled = true;
this.animateFinishFunction = null;
// These settings are useful when navItem.sliceAngle < 360 / this.navItemCount
this.navItemsContinuous = false;
this.navItemsCentered = true; // This is reasoned when this.navItemsContinuous = false;
this.colors = colorpalette.defaultpalette;
this.titleSpreadScale = null;
//Spreader settings
this.spreaderEnable = false;
this.spreaderRadius = 20;
this.spreaderStartAngle = 0;
this.spreaderOutTitleHeight = null;
//Percents
this.minPercent = 0.01;
this.maxPercent = 1;
this.initPercent = 1;
//Marker settings
this.markerEnable = false;
this.markerPathFunction = markerPath().TriangleMarker;
this.markerPathCustom = null;
//Private properties
this.currentClick = 0;
this.animateLocked = false;
//NavItem default settings. These are configurable between initWheel() and createWheel().
this.slicePathAttr = null;
this.sliceHoverAttr = null;
this.sliceSelectedAttr = null;
this.titleFont = '100 24px Impact, Charcoal, sans-serif';
this.titleAttr = null;
this.titleHoverAttr = null;
this.titleSelectedAttr = null;
this.titleSelectedHeight = null;
this.linePathAttr = null;
this.lineHoverAttr = null;
this.lineSelectedAttr = null;
this.slicePathCustom = null;
this.sliceClickablePathCustom = null;
this.sliceSelectedPathCustom = null;
this.sliceHoverPathCustom = null;
this.sliceInitPathCustom = null;
this.sliceTransformCustom = null;
this.sliceSelectedTransformCustom = null;
this.sliceHoverTransformCustom = null;
this.sliceInitTransformCustom = null;
this.animateeffect = null;
this.animatetime = null;
this.sliceClickablePathFunction = null;
this.sliceInitPathFunction = null;
this.sliceInitTransformFunction = null;
this.keynavigateEnabled = false;
this.keynavigateOnlyFocus = false;
this.keynavigateUpCode = 39; // right arrow
this.keynavigateUpCodeAlt = 38; // up arrow
this.parseWheel(holderDiv);參數(shù)比較多，請大家結(jié)合源碼進(jìn)行設(shè)置。組件的參數(shù)從類別上來分，主要分為以下幾種類型：
| 序號 | 類別 | 說明 |
| 1 | holderId | 基礎(chǔ)配置，元素唯一 |
| 2 | //Prepare raphael object and set the width | 基礎(chǔ)寬度設(shè)置 |
| 3 | //Public properties | 公共屬性，如位置等 |
| 4 | //Spreader settings | 應(yīng)該是一些動(dòng)畫的設(shè)置 |
| 5 | //Percents | 組件百分比 |
| 6 | //Marker settings | 標(biāo)記設(shè)置 |
除了以上的設(shè)置，組件還有其他的一些設(shè)置，結(jié)合幫助文檔可以做出更加符合需要的組件。
2、運(yùn)行方法
我們通過源碼調(diào)試的方式來講解實(shí)際的方法運(yùn)行。通過F12打開調(diào)試界面：
這里首先開始進(jìn)行公共屬性的設(shè)置，最后根據(jù)屬性來創(chuàng)建實(shí)際的動(dòng)畫對象：
根據(jù)我們設(shè)置的數(shù)據(jù)項(xiàng)創(chuàng)建平均分配動(dòng)態(tài)菜單的方法：
這里將循環(huán)每個(gè)數(shù)據(jù)，動(dòng)態(tài)創(chuàng)建子組件，最后返回wheelnav對象同時(shí)在頁面上展示出來。這樣我們就完成了wheelnav組件的創(chuàng)建以及頁面集成使用。
3、實(shí)際成果
wheelnav.js還可以實(shí)現(xiàn)更多有意思的效果。下面給出幾個(gè)實(shí)際的例子，大家可以發(fā)揮自己的聰明才智，將wheelnav集成到自己的項(xiàng)目中：
四、總結(jié)
以上就是本文的主要內(nèi)容，本文主要介紹一種基于SVG的web動(dòng)態(tài)導(dǎo)航組件。通過這個(gè)組件可以實(shí)現(xiàn)很多豐富酷炫的效果。首先介紹這款wheelnav.js的相關(guān)知識，然后結(jié)合代碼講解如何在html頁面中創(chuàng)建其對象，接著講解wheelnav的一些屬性和方法，最后給出基于wheelnav的實(shí)際成果。如果您目前也有類似的需求，不妨來這里看看，或許能提供一些參考。行文倉促，難免有不足之處，如有不當(dāng)之處，還請各位專家朋友在評論區(qū)留言批評指正，不勝感激。下次我們講講在GIS當(dāng)中怎么樣集成這款組件。
到此這篇關(guān)于如何使用wheelnav.js構(gòu)建酷炫的動(dòng)態(tài)導(dǎo)航菜單的文章就介紹到這了,更多相關(guān)wheelnav.js動(dòng)態(tài)導(dǎo)航菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 利用Js+Css實(shí)現(xiàn)折紙動(dòng)態(tài)導(dǎo)航效果實(shí)例源碼
- JS+CSS實(shí)現(xiàn)鼠標(biāo)滑過時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條效果
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- JS實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單（現(xiàn)代都市風(fēng)）
- JS無限級導(dǎo)航菜單實(shí)現(xiàn)方法
- vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
- js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航
- 原生JS實(shí)現(xiàn)導(dǎo)航下拉菜單效果
相關(guān)文章
一起來看看JavaScript數(shù)據(jù)類型最詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Javascript刷新頁面實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
微信小程序城市定位的實(shí)現(xiàn)實(shí)例（獲取當(dāng)前所在國家城市信息）
這篇文章給大家認(rèn)真介紹了微信小程序城市定位的實(shí)現(xiàn)實(shí)例，主要實(shí)現(xiàn)了獲取當(dāng)前所在國家城市信息的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
JS作用域閉包、預(yù)解釋和this關(guān)鍵字綜合實(shí)例解析
這篇文章主要介紹了JS作用域閉包、預(yù)解釋和this關(guān)鍵字,結(jié)合實(shí)例形式分析了javascript作用域閉包、預(yù)解釋和this關(guān)鍵字在具體使用過程中的操作技巧與注意事項(xiàng),需要的朋友可以參考下2016-12-12
本文主要介紹了快速排序思想與冒泡排序思想。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
js實(shí)現(xiàn)固定區(qū)域內(nèi)的不重疊隨機(jī)圓
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)固定區(qū)域內(nèi)的不重疊隨機(jī)圓，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了ES6新特性之變量的解構(gòu)賦值操作,結(jié)合實(shí)例形式分析了ES6針對數(shù)組、對象等的解構(gòu)賦值操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡單的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
微信小程序數(shù)據(jù)統(tǒng)計(jì),現(xiàn)在有很多的統(tǒng)計(jì)方法和統(tǒng)計(jì)工具,下面這篇文章主要給大家介紹了關(guān)于小程序統(tǒng)計(jì)來源信息的方案與具體代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09