CN117850781A - 一种三维的自动旋转导航栏创建方法、设备及介质 - Google Patents

Abstract

本申请公开了三维的自动旋转导航栏创建方法、设备及介质，方法包括：确定导航块的数量，设置导航块的分布，以将导航块沿圆形轨道均匀分布，添加立体属性，并设置三维样式，对导航块添加动画效果，并设置定时轮询，以实现导航块沿圆形轨道自动旋转，监听鼠标移动事件，根据鼠标移动坐标值，设置导航块的旋转值，根据旋转值，修改每个导航块对应的缩放值，使导航块跟随鼠标移动事件进行相应的旋转和缩放。添加透视元素，使网页中的子元素获得透视效果，并对导航块添加立体元素，让导航块围绕一个中心点旋转，实现立体的视觉效果，同时在旋转过程中将旋转到最前面的导航块突显一下，达到更好的动画效果。

Description

一种三维的自动旋转导航栏创建方法、设备及介质

技术领域

本申请涉及计算机网页设计领域，具体涉及一种三维的自动旋转导航栏创建方法、设备及介质。

背景技术

导航栏是指在系统或网站中，展示系统功能的模块，一般的系统和网站中都会有导航栏，为用户提供导航和访问不同页面或功能的途径，导航栏通常位于页面的顶部或侧边，并包含一系列链接或按钮，用户可以通过点击这些链接或按钮来快速访问其他页面或执行特定的功能操作。

传统的导航栏位于网页页面顶部或者侧边区域的，为一排水平或竖直的导航按钮，不能自动旋转和拖拽，不能带来立体效果，将网页显示在大屏中时会显得比较枯燥，并且网站中的各个功能模块不能被清晰的展示，不能给予使用者良好的视觉体验，给用户使用带来了不便。

发明内容

为了解决上述问题，本申请提出了一种三维的自动旋转导航栏创建方法，包括：

确定导航栏中导航块的数量，设置所述导航块的分布，以将所述导航块沿圆形轨道均匀分布；

对所述导航块添加立体属性，并设置三维样式；

对所述导航块添加动画效果，并设置定时轮询，以实现所述导航块沿所述圆形轨道自动旋转；

对所述导航栏添加鼠标移动事件，监听所述鼠标移动事件，根据鼠标移动坐标值，设置所述导航块的旋转值；

根据所述旋转值，修改每个所述导航块对应的缩放值，使所述导航块跟随所述鼠标移动事件进行相应的旋转和缩放。

另一方面，本申请还提出三维的自动旋转导航栏创建设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如：上述示例所述的三维的自动旋转导航栏创建方法。

另一方面，本申请还提出了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：上述示例所述的三维的自动旋转导航栏创建方法。

通过本申请提出一种三维的自动旋转导航栏创建方法能够带来如下有益效果：

通过对网页页面添加透视元素，使网页中的子元素获得透视效果，并对导航块添加立体元素，使其获得立体效果，让导航块围绕一个中心点旋转，实现立体的视觉效果，同时在旋转过程中将旋转到最前面的导航块突显一下，达到更好的动画效果。

整个系统的导航块占比大，显示的明显，主次分明，能更清晰的展示导航块，呈现出更好的视觉效果，并且导航栏不但可以自动旋转，也可以通过用户拖拽切换旋转元素让其进入下一个旋转周期，展现出更好的交互效果。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例中一种三维的自动旋转导航栏创建方法的流程示意图；

图2为本申请实施例中6个导航块只沿Y轴旋转的示意图；

图3为本申请实施例中6个导航块只沿Z轴偏移的示意图；

图4为本申请实施例中6个导航块沿Y轴旋转40°、沿Z轴偏移300px的示意图；

图5为本申请实施例中6个导航块沿Y轴旋转80°、沿Z轴偏移300px的示意图；

图6为本申请实施例中6个导航块正前方导航块透明度设置为1、其他设置为0.6的示意图；

图7为本申请实施例中一种三维的自动旋转导航栏创建设备的示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。

如图1所示，本申请实施例提供一种三维的自动旋转导航栏创建方法，包括：

S101：确定导航栏中导航块的数量，设置所述导航块的分布，以将所述导航块沿圆形轨道均匀分布。

在网站或系统中为方便展示系统功能，通常会设置导航栏来帮助用户导航和浏览网站不同页面和功能，传统的导航栏以二维的方式位于网页页面一侧，包含一系列链接和按钮，导航栏在网站首页中所占空间较小，可能会有不能完全展示系统功能和用户未发现导航栏的情况，给用户的使用带来了很多不便，并且在大屏导航方面酷炫效果不足，不能给予使用者良好的视觉体验。

因此，本申请提供一种三维的自动旋转导航栏创建方法，通过设置导航栏，让导航块围绕一个中心点旋转，实现立体的视觉效果。具体地，根据系统功能确定导航栏中导航块的数量，根据导航块的数量确定导航块旋转的轨道半径，根据轨道半径和旋转的中心点设置圆形轨道，并将导航块以竖立的方式，均匀的分布在圆形轨道上。

其中，每个导航块是一个块级元素，形状是矩形，导航块的数量不多于6个，如果多于6个，则会因为圆形轨道上导航块数量过于密集，而导致导航块旋转的角度过小且旋转时间间隔太短，不能清晰的展示出来每个导航块的内容，同时也不能达到很好的视觉效果。

S102：对所述导航块添加立体属性，并设置三维样式。

具体地，对网页页面对应的第一父元素，添加CSS样式中的perspective透视属性，并且获取第一父元素中的第一子元素，其中perspective属性定义在第一父元素中，其对应的第一子元素便在立体空间中获得透视效果，并通过perspective属性设置第一父元素与第一子元素之间的距离，来设置第一子元素透视效果的强度，比如设置perspective:1500px，指透视效果的焦点距离为1500像素，子元素在离焦点1500像素的位置处会有一个近大远小的透视效果。

进一步地，通过设置transform-style样式，为每个导航块对应的父元素添加立体属性，以定义导航块对应的子元素在立体空间中的变换方式，并将transform-style属性值设置为preserve-3d，使导航块子元素在立体空间中进行独立的旋转、缩放和平移变换，而不会受到其父元素的限制，使整个导航栏的旋转效果更加顺滑。

S103：对所述导航块添加动画效果，并设置定时轮询，以实现所述导航块沿所述圆形轨道自动旋转。

具体地，对导航块添加立体属性之后，对导航块添加动画效果，将其放在三维坐标系中，先将每个导航块先沿坐标系的Y轴方向旋转，直至将导航块沿Y轴旋转至360°，之后再沿坐标系的Z轴方向偏移一定的距离，其中旋转值为旋转度数，是360°与导航块的数量之比，沿Z轴偏移的距离为圆形轨道半径的值。

其中，在本发明实施例中，导航块动画效果可以通过CSS3实现，对应的代码如下所示，其中ransition:all 1s是指导航块的动画效果在1秒内过渡完成，animation:rotation10s linear infinite backward是指导航块的动画效果在10秒内循环播放，rotateY(0deg)表示导航块绕Y轴的旋转值为0°，即当前未开始旋转，transform:rotateY(360deg)表示导航块绕Y轴的旋转值为360°，即当前已完成对导航栏的旋转。

.box{

transition:all 1s；

animation:rotation 10s linear infinite backwards；

}

@keyframes rotation{

0％{

transform:rotateY(0deg)

}

100％{

transform:rotateY(360deg)；

}

}

另外，如果导航块沿Y轴方向旋转完之后，不沿Z轴进行偏移的话，那么整个坐标系就旋转了一定的角度，而没有达到导航栏整体进行旋转的效果，假设导航块为6个，只沿Y轴旋转的示意图就如图2所示，若不将导航块沿Y轴旋转，只沿Z轴偏移的话，则只是将导航块向外推出一定的距离，并没有实现导航栏的旋转，假设导航块为6个，只沿Z轴偏移的示意图就如图3所示。

为方便理解，本申请给出一个具体的示例，比如，导航栏中导航块数量为6个，轨道半径的值为300px，则旋转值为360°÷6＝60°，偏移距离为300px，从而通过旋转表达式：transform:rotateY((i*60)deg)translateZ(300px)，得到该导航栏的旋转效果，并可以通过旋转表达式，设置旋转值，当旋转值为40°时，旋转表达式为：transform:rotateY((40)deg)translateZ(300px)，其旋转示意图如图4所示；当旋转值为80°时，旋转表达式为：transform:rotateY((80)deg)translateZ(300px)，其旋转示意图如图5所示。

进一步地，通过setInterval函数设置定时轮询，定时调用设置导航块父元素旋转和导航块子元素变换的函数，以实现所述导航块沿所述圆形轨道自动旋转。具体地，在轮询过程中，将导航块沿Y轴的旋转值进行递减，并将导航块根据递减的旋转值进行下次旋转。

并且，在导航块旋转过程中，为实现对导航块旋转时缩放变化的动画效果，通过scale函数，在初始化时将第一个导航块，即沿Y轴方向旋转值为0°的导航块，对应的导航块父元素缩放值设置为最大值，最大值为1，并根据与第一个导航块的距离进行递减，设置其他导航块对应的缩放值。而距离第一个导航块越远的其他导航块，设置的缩放倍数越小，比如，在上文的具体示例中，导航块数量为6，,那么可以将缩放值依次设置为scaleArr＝[1，0.9，0.8，0.7，0.8，0.9]。在旋转过程中，根据每个导航块的旋转值确定每个导航块的位置，根据位置设置其对应的缩放值，当在执行轮询过程中，导航块旋转值在[360/n*1,360/n*(n-1)]范围内时，其中n是导航块数量，该导航块的缩放值为最大值，如图6所示，对应导航块父元素的透明度为1，其他导航块子元素透明度设置为0.6，其他的导航块根据与该导航块的距离设置其对应的缩放值，通过代码：navBlock[i].style.transform＝rotateY((i*360/n)deg)translateZ(rpx)+ˋscale(${scaleAr r[0]})实现当前导航块的旋转效果，其中i指代为当前导航块父元素。

S104：对所述导航栏添加鼠标移动事件，监听所述鼠标移动事件，根据鼠标移动坐标值，设置所述导航块的旋转值。

具体地，为导航栏增加手动可切换旋转的功能，对导航栏添加onmousedown鼠标点击事件和onmousemove鼠标拖动事件，当响应鼠标点击事件时，并通过代码lastX＝event.clientX，记录当前鼠标水平坐标值位置，得到鼠标所在的第一位置，之后监听鼠标拖动事件，通过代码nowX＝event.clientX，得到鼠标所在的第二位置，基于第一位置和第二位置，通过代码const desX＝nowX-laseX得到鼠标在水平方向移动距离，计算得到鼠标移动坐标值。

进一步地，通过代码rotY+＝desX*0.2将计算得到的鼠标移动坐标值*0.2换算成旋转的度数，并将旋转度数值记录起来，每次响应鼠标移动事件时都更新。

S105：根据所述旋转值，修改每个所述导航块对应的缩放值，使所述导航块跟随所述鼠标移动事件进行相应的旋转和缩放。

具体地，在手动拖拽导航块时，导航块跟随鼠标拖拽进行相应角度的旋转，根据导航块的旋转值，修改每个导航块对应的缩放值。首先判断在导航块中，处于网页页面正前方的是哪个导航块，获取每个导航块的旋转值，如果旋转值不小于360/n/2时，n为导航块数量，则通过代码currentIndex＝导航块个数-(Math.round(rotY/360/n/2)％导航块个数)，计算该导航块的当前索引位置，如果旋转值小于360/n/2时，则通过代码currentIndex＝Math.abs(Math.round(rotY/360/n/2)％导航块个数)，计算该导航块的当前索引位置。根据导航块的当前索引位置，按照步骤S103中设置缩放值的规则，设置每个导航块对应的缩放值。

进一步地，在鼠标拖拽过程中，需要通过代码navParent.style.transition＝null，去掉导航块元素的位置变化动画，当无鼠标拖拽过程，导航块自动旋转时，需要通过代码navParent.style.transition＝'transform 0.5s linear'，对导航块增加位置变化动画，并通过代码navBlock.style.transition＝'transform 0.5s linear'，增加导航块缩放变化的动画。并对鼠标添加悬停样式，使鼠标停留在所述导航块时，导航块停止旋转，对每个导航块绑定点击事件，添加对应的跳转链接，以响应点击事件时实现页面跳转，实现系统导航功能。

本申请实施例，通过不同的设置方法，让导航块围绕一个中心点旋转，实现3d立体的视觉效果，同时在旋转过程中将旋转到最前面的导航块突显一下，达到更好的动画效果；整个系统的导航块占比大，显示的明显，主次分明，能更清晰的展示导航块，呈现出更好的视觉效果；同时导航块不但可以自动旋转，也可以通过用户拖拽切换旋转元素让其进入下一个旋转周期，展现出更好的交互效果；并且本申请实施例不仅仅可以使用在一个系统的导航部分，还可以在任何需要在个数少的元素需要依次展示的地方，提供一种崭新的展示方式。

如图7所示，本申请实施例还提出了三维的自动旋转导航栏创建设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如：上述任一实施例所述的一种三维的自动旋转导航栏创建方法。

本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：上述任一实施例所述的三维的自动旋转导航栏创建方法。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种三维的自动旋转导航栏创建方法，其特征在于，包括：

确定导航栏中导航块的数量，设置所述导航块的分布，以将所述导航块沿圆形轨道均匀分布；

对所述导航块添加立体属性，并设置三维样式；

对所述导航块添加动画效果，并设置定时轮询，以实现所述导航块沿所述圆形轨道自动旋转；

对所述导航栏添加鼠标移动事件，监听所述鼠标移动事件，根据鼠标移动坐标值，设置所述导航块的旋转值；

根据所述旋转值，修改每个所述导航块对应的缩放值，使所述导航块跟随所述鼠标移动事件进行相应的旋转和缩放。

2.根据权利要求1所述的方法，其特征在于，所述确定导航栏中导航块的数量，设置所述导航块的分布，以将所述导航块沿圆形轨道均匀分布，具体包括：

确定导航栏中导航块的数量，根据所述导航块的数量，确定所述导航块旋转的轨道半径，其中，所述导航块的的数量不多于6个；

基于所述轨道半径，设置圆形轨道，将所述导航块以垂直于平面的形式，沿圆形轨道均匀分布。

3.根据权利要求1所述的方法，其特征在于，所述对所述导航块添加立体属性之前，所述方法还包括：

对所述导航栏所属的网页页面对应的第一父元素添加透视属性，获取所述第一父元素中的第一子元素，设置所述第一子元素与所述第一父元素之间的间隔；

基于所述间隔，设置透视强度，使所述第一子元素获得相应的透视效果。

4.根据权利要求1所述的方法，其特征在于，所述对所述导航块添加动画效果，并设置定时轮询，以实现所述导航块沿所述圆形轨道自动旋转，具体包括：

基于三维坐标系，先将所述导航块沿Y轴方向旋转，再沿Z轴方向移动，直至将所述导航块沿Y轴旋转至360°，完成对所述导航块的旋转，其中，沿Y轴的旋转值为360°与所述导航块的数量之比，沿Z轴移动距离为所述轨道半径的值；

并设置定时轮询，调用所述导航块旋转对应的函数，以实现所述导航块沿所述圆形轨道自动旋转。

5.根据权利要求4所述的方法，其特征在于，所述设置定时轮询，调用所述导航块旋转对应的函数，具体包括：

设置定时轮询，在轮询过程中，定时调用所述导航块旋转对应的函数，并将所述导航块沿Y轴的旋转值进行递减，根据递减的所述旋转值进行下次旋转。

6.根据权利要求1所述的方法，其特征在于，所述监听所述鼠标移动事件，根据鼠标移动坐标值，设置所述导航块的旋转值，具体包括：

监听鼠标点击事件，得到鼠标所在的第一位置，并监听鼠标拖动事件，得到所述鼠标所在的第二位置，根据所述第一位置和所述第二位置，得到鼠标移动坐标值；

根据所述鼠标移动坐标值，更新所述导航块的旋转值。

7.根据权利要求1所述的方法，其特征在于，所述根据所述旋转值，修改每个所述导航块对应的缩放值，具体包括：

根据所述旋转值，设置所述导航块的缩放倍数，确定所述旋转值为0°，将所述缩放倍数设置为最大值；

将所述缩放倍数随着所述旋转值的增加而递减，直至确定所述旋转值为180°，将所述缩放倍数设置为最小值。

8.根据权利要求1所述的方法，其特征在于，所述对所述导航栏添加鼠标移动事件之后，所述方法还包括：

对所述鼠标添加悬停样式，使所述鼠标停留在所述导航块时，所述导航块停止旋转；

对每个所述导航块绑定点击事件，并添加对应的跳转链接，以响应所述点击事件时实现页面跳转。

9.一种三维的自动旋转导航栏创建设备，其特征在于，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如：权利要求1～8中任一项权利要求所述的三维的自动旋转导航栏创建方法。

10.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：权利要求1～8中任一项权利要求所述的三维的自动旋转导航栏创建方法。