jQuery右下角旋转环状菜单特效代码

2023年6月11日上午12:16 • JavaScript

要实现“jQuery右下角旋转环状菜单特效”，需要按以下步骤进行操作：

1. 引入jQuery库文件和相关CSS文件

<!DOCTYPE html>
<html>
<head>
    <title>Right bottom rotating menu</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- HTML内容 -->
<script src="script.js"></script>
</body>
</html>

需要引入jQuery库文件和相关的CSS文件，以此确保可以正常运行此旋转环状菜单特效。

2. 编写HTML内容

<div class="wrapper">
    <div class="menu-container">
        <div class="menu">
            <div class="item"><a href="#">Home</a></div>
            <div class="item"><a href="#">About</a></div>
            <div class="item"><a href="#">Contact</a></div>
            <div class="item"><a href="#">Portfolio</a></div>
            <div class="item"><a href="#">Blog</a></div>
        </div>
        <div class="btn">+</div>
    </div>
</div>

在页面中编写HTML内容，包括一个wrapper容器、一个menu-container容器和一个btn按钮。menu-container容器中包含一个menu菜单，其中每个菜单项都包含一个item和一个链接。

3. 编写CSS样式

/* 下面是主要的CSS样式 */
body {
    margin:0;
    padding:0;
}

.wrapper {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba(255,145,0,0.8);
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.menu-container {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.menu {
    position:absolute;
    bottom:0;
    right:0;
    transform: scale(0) rotate(0deg);
    transform-origin: bottom right;
    transition: all 0.3s ease-in-out;
}

.btn {
    position:absolute;
    bottom:20px;
    right:20px;
    width:56px;
    height:56px;
    line-height:56px;
    border-radius:50%;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    background:#FFF;
    color:#000;
    cursor:pointer;
    transition: all 0.3s ease-in-out;
}

.wrapper.active .btn {
    transform:rotate(45deg);
    background:transparent;
    box-shadow:none;
    color:#fff;
}

.wrapper.active .menu {
    transform:scale(1) rotate(-360deg);
    background:rgba(0,0,0,0.4);
    box-shadow:0 0 20px rgba(0,0,0,0.6);
}

编写CSS样式，包括.wrapper、.menu-container、.menu和.btn的样式。其中，.menu的初始样式是被缩小且被旋转的，.btn的样式是一个加号外观的圆圈，在菜单展开后旋转45度的同时，变换颜色。

4. 编写jQuery代码

$(document).ready(function() {

    $('.btn').click(function() {
        $('.wrapper').toggleClass('active')
    })

    $('.menu a').click(function() {
        $('.wrapper').removeClass('active')
    })
})

编写jQuery代码实现特效。调用toggleClass()函数来对.wrapper应用.active类，控制.btn、.menu的展开与缩放效果。同时，使用.click()函数来负责处理.btn的点击事件，以及.menu菜单中每个a元素的点击事件，点击后可以使菜单收回。

示例说明

示例1：

详细讲解：“右下角旋转环状菜单特效”如何应用？

此特效可以用于网页中的菜单设计。在设计中，点击后会呈现如环形旋转的菜单效果，以便更好的展现出菜单项目。

示例2：

详细讲解：“右下角旋转环状菜单特效”如何增加菜单项？

在HTML中增加.item即可，例如：

<div class="menu">
    <div class="item"><a href="#">Home</a></div>
    <div class="item"><a href="#">About</a></div>
    <div class="item"><a href="#">Contact</a></div>
    <div class="item"><a href="#">Portfolio</a></div>
    <div class="item"><a href="#">Blog</a></div>
    <div class="item"><a href="#">New Item</a></div>
</div>

在上述代码中增加了一个名称为“New Item”的菜单项，可以被添加到环状菜单中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery右下角旋转环状菜单特效代码 - Python技术站