一、效果介绍

一个圆盘为底,上面均匀分布了几个按钮.在鼠标没有移入圆盘时,这个圆盘会自动进行旋转.当鼠标移入圆盘时停止旋转,鼠标离开时又恢复旋转.这种效果如何制作呢？

今天就让长沙网站建设来教您!

页面代码非常简单,只需要一个包裹着按钮的容器就够了,再为最外两层div附加上id便于控制.

二、JavaScript核心代码展示

因为需要设置鼠标移入移出控制圆盘旋转状态,所以长沙网站制作在最开始就对isRotating的状态进行了判断.当鼠标移入将状态改为false,让轮盘停止旋转供用户点击按钮.移出或者鼠标没有移入时,这个状态则为true,圆盘自动进行旋转.

但整个圆盘都进行旋转,那么按钮上的文字用户就看不清了,所以为了避免影响到用户的体验,我们还需要增加一段代码：

menuItems.forEach(item => {
   const span = item.querySelector('span');
   span.style.transform = `rotate(${-currentRotation}deg)`;
});

圆盘是正向的旋转,长沙网站设计添加的这段代码会将旋转角度由正变成负,应用到按钮元素上后让它进行反向的旋转.这样一正一负相抵消,在页面上的按钮以及里面的文字将永远保持水平显示.

三、效果视频展示：

效果视频如上,圆盘的旋转和静止会被鼠标的动作正确控制.并且也可以看到无论怎么旋转,按钮上的文字都会水平显示在我们眼中.

四、应用推荐

这种效果不同于普通的导航,不适合放在页面顶部.但是可以通过其他的方式唤出来,比如在页面向下滚动时从屏幕下方浮现,或者通过浮窗按钮的方式,点击唤出等等.

并且也可以通过设计不同的底部图片或者按钮样式,来增加美观度.这对于用户的体验来说会是个不错的效果.

以上就是长沙网站开发整理的旋转轮盘菜单的实现方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.