亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何使用wheelnav.js構(gòu)建酷炫的動(dòng)態(tài)導(dǎo)航菜單

 更新時(shí)間：2024年06月05日 09:53:43   作者：夜郎king  
本文主要介紹一種基于SVG的web動(dòng)態(tài)導(dǎo)航組件,通過(guò)這個(gè)組件可以實(shí)現(xiàn)很多豐富酷炫的效果,首先介紹這款wheelnav.js的相關(guān)知識(shí),然后結(jié)合代碼講解如何在html頁(yè)面中創(chuàng)建其對(duì)象,接著講解wheelnav的一些屬性和方法,最后給出基于wheelnav的實(shí)際成果,喜歡的朋友一起學(xué)習(xí)吧

前言

        用戶體驗(yàn)永遠(yuǎn)是一個(gè)值得探討的問(wèn)題，同時(shí)也是應(yīng)該在平時(shí)的研發(fā)工作工作中作為重點(diǎn)關(guān)注的地方。使用習(xí)慣，界面的布局，用戶點(diǎn)擊操作的系統(tǒng)反應(yīng)情況，都會(huì)給使用者帶來(lái)很大的沖擊。關(guān)于用戶體驗(yàn)的設(shè)計(jì)，尤其以吸引用戶，在應(yīng)用上做更多的停留。需要我們的界面設(shè)計(jì)者花更多的心思。本文無(wú)意于過(guò)多的講解如何進(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è)方面，就像知識(shí)圖譜中的一些關(guān)系，更妙的是，在功能界面上，用戶可以在選擇不同的維度之后，右邊的界面會(huì)跟隨左邊的維度來(lái)自動(dòng)切換，完全是一種動(dòng)態(tài)的導(dǎo)航菜單。

        本文即在上述的場(chǎng)景中，主要介紹一種基于SVG的web動(dòng)態(tài)導(dǎo)航組件。通過(guò)這個(gè)組件可以實(shí)現(xiàn)很多豐富酷炫的效果。首先介紹這款wheelnav.js的相關(guān)知識(shí)，然后結(jié)合代碼講解如何在html頁(yè)面中創(chuàng)建其對(duì)象，接著講解wheelnav的一些屬性和方法，最后給出基于wheelnav的實(shí)際成果。如果您目前也有類似的需求，不妨來(lái)這里看看，或許能提供一些參考。

一、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è)輕量級(jí)的庫(kù)，因此可以輕松地集成到現(xiàn)有的 HTML、CSS 和 JavaScript 項(xiàng)目中。

1、項(xiàng)目地址

        本節(jié)將介紹這個(gè)庫(kù)的開(kāi)源地址。如果大家可以正常訪問(wèn)到github的話，可以在github中找到其源碼，github源碼地址。如果訪問(wèn)不是很流程，大家在國(guó)內(nèi)的gitee上訪問(wèn)也是可以的。也有技術(shù)人員在上面會(huì)自動(dòng)同步相應(yīng)的庫(kù)。相關(guān)資源可以問(wèn)問(wèn)度娘。下面以github為例，說(shuō)明：

2、關(guān)于開(kāi)源協(xié)議

        開(kāi)源協(xié)議是用于規(guī)范使用開(kāi)源項(xiàng)目的一種協(xié)議，因此我們?cè)谑褂瞄_(kāi)源項(xiàng)目的時(shí)候一定要非常注意，作為一個(gè)技術(shù)人，要尊重作者，尊重開(kāi)源，把生態(tài)圈共同維護(hù)好。wheelnav采用的是寬松的MIT協(xié)議，對(duì)使用方?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)目錄介紹

        把上面的開(kāi)源項(xiàng)目clone到本地之后，打開(kāi)目錄可以看到以下信息：

        其中，在這個(gè)文件夾下面包含了js腳本文件、css樣式文件以及一些實(shí)例程序，還有一些對(duì)于工程的配套說(shuō)明文件。 這里不再進(jìn)行贅述。下面結(jié)合源碼對(duì)其實(shí)現(xiàn)進(jìn)行講解。

二、如何使用wheelnav.js

        在我們將相關(guān)的源碼下載到本地之后，即將開(kāi)始我們的學(xué)習(xí)之旅。在這個(gè)過(guò)程當(dāng)中，我們將學(xué)會(huì)如何創(chuàng)建一個(gè)動(dòng)態(tài)的導(dǎo)航按鈕，以及實(shí)現(xiàn)具體的切換效果。掌握一些基礎(chǔ)的參數(shù)設(shè)置方法。

1、新建html頁(yè)面

        作為一款前端的javascript組件，要想在界面上展現(xiàn)出來(lái)。一定少不了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>&copy; 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對(duì)象出來(lái)。下面以代碼的形式主要講解如何創(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>

        這里通過(guò)new wheelnav("wheelDiv")。將動(dòng)態(tài)組件綁定到div中。然后設(shè)置它的參數(shù)，每個(gè)導(dǎo)航菜單還有設(shè)置默認(rèn)的菜單項(xiàng)。以上即完成了最簡(jiǎn)單的示例。你應(yīng)該掌握它的最基本用法。

三、參數(shù)即方法介紹

        為了方便大家了解wheelnav組件，這里將對(duì)這個(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ù)比較多，請(qǐng)大家結(jié)合源碼進(jìn)行設(shè)置。組件的參數(shù)從類別上來(lái)分，主要分為以下幾種類型：

序號(hào)類別說(shuō)明
1holderId基礎(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)行方法

        我們通過(guò)源碼調(diào)試的方式來(lái)講解實(shí)際的方法運(yùn)行。通過(guò)F12打開(kāi)調(diào)試界面：

         這里首先開(kāi)始進(jìn)行公共屬性的設(shè)置，最后根據(jù)屬性來(lái)創(chuàng)建實(shí)際的動(dòng)畫對(duì)象：

        根據(jù)我們?cè)O(shè)置的數(shù)據(jù)項(xiàng)創(chuàng)建平均分配動(dòng)態(tài)菜單的方法：

         這里將循環(huán)每個(gè)數(shù)據(jù)，動(dòng)態(tài)創(chuàng)建子組件，最后返回wheelnav對(duì)象同時(shí)在頁(yè)面上展示出來(lái)。這樣我們就完成了wheelnav組件的創(chuàng)建以及頁(yè)面集成使用。

3、實(shí)際成果

        wheelnav.js還可以實(shí)現(xiàn)更多有意思的效果。下面給出幾個(gè)實(shí)際的例子，大家可以發(fā)揮自己的聰明才智，將wheelnav集成到自己的項(xiàng)目中：

四、總結(jié) 

        以上就是本文的主要內(nèi)容，本文主要介紹一種基于SVG的web動(dòng)態(tài)導(dǎo)航組件。通過(guò)這個(gè)組件可以實(shí)現(xiàn)很多豐富酷炫的效果。首先介紹這款wheelnav.js的相關(guān)知識(shí)，然后結(jié)合代碼講解如何在html頁(yè)面中創(chuàng)建其對(duì)象，接著講解wheelnav的一些屬性和方法，最后給出基于wheelnav的實(shí)際成果。如果您目前也有類似的需求，不妨來(lái)這里看看，或許能提供一些參考。行文倉(cāng)促，難免有不足之處，如有不當(dāng)之處，還請(qǐng)各位專家朋友在評(píng)論區(qū)留言批評(píng)指正，不勝感激。下次我們講講在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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論