找回密码
当前位置：前端开发者 > jQuery > 正文

jQuery效果 弧形弹出菜单

2018-07-18 分类：jQuery 阅读(938) 评论(0)

前端开发找工作群|新疆前端开发就业|web前端开发就业数据

代码片段 1

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
    <meta charset=”gbk”>
    <title>前端开发职描述及岗位：jquery效果</title>
    <style type=”text/css”>
        /* reset */
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0
        }
        table {
            border-collapse: collapse;
            border-spacing: 0
        }
        fieldset,
        img {
            border: 0
        }
        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
            font-weight: normal
        }
        ol,
        ul {
            list-style: none
        }
        caption,
        th {
            text-align: left
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
            font-weight: normal
        }
        q:before,
        q:after {
            content: ”
        }
        abbr,
        acronym {
            border: 0;
            font-variant: normal
        }
        sup {
            vertical-align: text-top
        }
        sub {
            vertical-align: text-bottom
        }
        input,
        textarea,
        select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit
        }
        input,
        textarea,
        select {
            *font-size: 100%
        }
        .hid {
            text-indent: -9999px;
            font-size: 0px;
            overflow: hidden;
            width: 0px;
            height: 0px;
            display: block
        }
        body {
            padding-top: 42px;
            min-width: 1000px;
            font: 12px/150% tahoma, ‘b8bf53’, sans-serif;
        }
        .circle_menu_box {
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
        .menu_list li {
            position: absolute;
            width: 40px;
            height: 40px;
            background: blue;
            color: #fff;
            line-height: 40px;
            text-align: center;
            bottom: 2px;
            right: 2px;
            border-radius: 50%;
        }
        .btn_show {
            width: 50px;
            height: 50px;
            bottom: 0;
            right: 0;
            position: absolute;
            background: red;
            z-index: 99;
            border-radius: 50%;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class=”circle_menu_box”>
        <ul class=”menu_list” id=”menu_list”>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <a href=”javascript:void(0)” class=”btn_show”>展开</a>
    </div>
    <script src=”http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js”></script>
    <script>
        (function () {
            $menuList = $(‘#menu_list li’);
            var listWidth = ($menuList.outerWidth()) / 2; // li元素宽度的一半
            var listHeight = ($menuList.outerHeight()) / 2; // li元素高度的一半
            var r = 220; // 圆弧半径
            var menuNum = $menuList.length; // 菜单个数
            var angle = 90; // 圆弧角度
            var perAngle = angle / (menuNum – 1); // 菜单之间的角度
            var posArr = []; // 存放每个元素right和bottom的数组
            function showMenu() {
                for (var i = 0; i < menuNum; i++) {
                    (function (num) {
                        posArr[num] = { ‘rightPos’: Math.sin((angle – perAngle * num) * Math.PI / 180) * r, ‘bottomPos’: Math.sin(perAngle * num * Math.PI / 180) * r }; //把每个li元素的位置存到数组里
                    })(i);
                }
                for (var i = 0; i < menuNum; i++) {
                    (function (a) {
                        setTimeout(function () {
                            $menuList.eq(a).stop().animate({ right: Math.floor(posArr[a].rightPos) – listWidth, bottom: Math.floor(posArr[a].bottomPos) – listHeight });
                        }, a * 50);
                    })(i);
                }
            }
            function hideMenu() {
                for (var i = 0; i < menuNum; i++) {
                    (function (a) {
                        setTimeout(function () {
                            $menuList.eq(a).stop().animate({ right: 2, bottom: 2 });
                        }, a * 50);
                    })(i);
                }
            }
            $(‘.btn_show’).toggle(function () {
                showMenu();
                $(this).html(‘缩小’);
            }, function () {
                hideMenu();
                $(this).html(‘展开’);
            });
        })();
    </script>
</body>
</html>

安卓原生前端开发|如何判断优秀的前端开发师|怎样回答如何看待前端开发

赞(0)
前端开发者 » jQuery效果 弧形弹出菜单
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论