欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用wheelnav.js構建酷炫的動態(tài)導航菜單

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

前言

        用戶體驗永遠是一個值得探討的問題，同時也是應該在平時的研發(fā)工作工作中作為重點關注的地方。使用習慣，界面的布局，用戶點擊操作的系統(tǒng)反應情況，都會給使用者帶來很大的沖擊。關于用戶體驗的設計，尤其以吸引用戶，在應用上做更多的停留。需要我們的界面設計者花更多的心思。本文無意于過多的講解如何進行用戶體驗的設計。用戶體驗只是我們所有的工程師共同去努力提升。

        上圖是一個非常有趣的百科歷史類的網(wǎng)站全歷史，這里的關系圖譜是動態(tài)支持旋轉的，非常有意思。根據(jù)人物不同的維度，比如以上述的歷史人物詹天佑為例，從人物的7個方面去描述，分別包括成就、友情、工作、地點、影響、經(jīng)歷、歸屬。這相當于人物的7個方面，就像知識圖譜中的一些關系，更妙的是，在功能界面上，用戶可以在選擇不同的維度之后，右邊的界面會跟隨左邊的維度來自動切換，完全是一種動態(tài)的導航菜單。

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

一、WheelNav是什么

        wheelnav.js 是一個基于 SVG 的動態(tài)導航菜單組件。它可以是一個派菜單（徑向菜單，循環(huán)菜單），選項卡導航，自菜單，選項按鈕，復選框等等。

        使用wheelnav可以實現(xiàn)以下效果：

        （1）創(chuàng)建圓形導航：輕松地創(chuàng)建一個基于圓形的導航菜單，其中每個菜單項都是圓形上的一個點或扇區(qū)。

        （2）高度可定制：自定義每個菜單項的顏色、形狀、大小、位置、標簽、工具提示等。
        （3）交互性：添加點擊、懸停和拖動事件，以便用戶與導航菜單進行交互。

        （4）動畫效果：為菜單項添加動畫效果，如漸變、旋轉、縮放等，以增強用戶體驗。

        （5）響應式設計：調(diào)整導航菜單以適應不同屏幕尺寸和設備類型，確保在各種設備上都能良好地顯示和工作。

        （6）集成應用：由于 wheelnav.js 是一個輕量級的庫，因此可以輕松地集成到現(xiàn)有的 HTML、CSS 和 JavaScript 項目中。

1、項目地址

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

2、關于開源協(xié)議

        開源協(xié)議是用于規(guī)范使用開源項目的一種協(xié)議，因此我們在使用開源項目的時候一定要非常注意，作為一個技術人，要尊重作者，尊重開源，把生態(tài)圈共同維護好。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、相關目錄介紹

        把上面的開源項目clone到本地之后，打開目錄可以看到以下信息：

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

二、如何使用wheelnav.js

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

1、新建html頁面

        作為一款前端的javascript組件，要想在界面上展現(xiàn)出來。一定少不了web組件，也就是html的支持。因此在進行wheelnav組件的使用之前，必須要創(chuàng)建一個html界面。關鍵代碼如下：

<!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、設置style樣式

        在定義好了html展現(xià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)建展示元素實現(xiàn)動態(tài)導航

        在引入了wheelnav組件之后，除了創(chuàng)建展示元素，設置渲染屬性，還需要將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")。將動態(tài)組件綁定到div中。然后設置它的參數(shù)，每個導航菜單還有設置默認的菜單項。以上即完成了最簡單的示例。你應該掌握它的最基本用法。

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

        為了方便大家了解wheelnav組件，這里將對這個組件的參數(shù)的方法進行相應的介紹。首先介紹這款組件的基本參數(shù)，然后再介紹這款組件的一些方法。

1、參數(shù)列表

        關于wheelnav組件的參數(shù)，可以在wheelnav.js這個組件的源碼中找到?？梢允褂梦谋竟ぞ呖匆幌略创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ù)比較多，請大家結合源碼進行設置。組件的參數(shù)從類別上來分，主要分為以下幾種類型：

序號類別說明
1holderId基礎配置，元素唯一
2//Prepare raphael object and set the width基礎寬度設置
3//Public properties公共屬性，如位置等
4//Spreader settings應該是一些動畫的設置
5//Percents組件百分比
6//Marker settings標記設置

        除了以上的設置，組件還有其他的一些設置，結合幫助文檔可以做出更加符合需要的組件。

2、運行方法

        我們通過源碼調(diào)試的方式來講解實際的方法運行。通過F12打開調(diào)試界面：

         這里首先開始進行公共屬性的設置，最后根據(jù)屬性來創(chuàng)建實際的動畫對象：

        根據(jù)我們設置的數(shù)據(jù)項創(chuàng)建平均分配動態(tài)菜單的方法：

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

3、實際成果

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

四、總結 

        以上就是本文的主要內(nèi)容，本文主要介紹一種基于SVG的web動態(tài)導航組件。通過這個組件可以實現(xiàn)很多豐富酷炫的效果。首先介紹這款wheelnav.js的相關知識，然后結合代碼講解如何在html頁面中創(chuàng)建其對象，接著講解wheelnav的一些屬性和方法，最后給出基于wheelnav的實際成果。如果您目前也有類似的需求，不妨來這里看看，或許能提供一些參考。行文倉促，難免有不足之處，如有不當之處，還請各位專家朋友在評論區(qū)留言批評指正，不勝感激。下次我們講講在GIS當中怎么樣集成這款組件。

到此這篇關于如何使用wheelnav.js構建酷炫的動態(tài)導航菜單的文章就介紹到這了,更多相關wheelnav.js動態(tài)導航菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論