如何使用jQuery实现一个圆周运动动画

鼠标悬停在圆形用户头像上的菜单栏（About me等），会出现沿着圆周旋转的信息提示框。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1658
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <link rel="stylesheet" href="https://tympanus.net/Tutorials/CircularPortfolio/css/style.css" type="text/css" media="screen" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial;
            background: #a7cede url(https://tympanus.net/Tutorials/CircularPortfolio/bg.png) no-repeat top right;
        }
        .title {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 130px;
            height: 570px;
            background: #a7cede url(https://tympanus.net/Tutorials/CircularPortfolio/title.png) no-repeat top left;
        }
        a.back {
            background: transparent url(https://tympanus.net/Tutorials/CircularPortfolio/back.png) no-repeat 0px 0px;
            position: absolute;
            width: 150px;
            height: 27px;
            outline: none;
            top: 2px;
            right: 0px;
        }
    </style>
    
</head>

<body>
    <div id="content">
        <div class="title"></div>
        <a class="back" href="https://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/"></a>
        <div class="wrapper">
            <div id="images" class="images">
                <img id="image_about" src="https://wow.techbrood.com/assets/coolgirl.jpg" alt="" width="402" height="402" style="display:block;" />
                <img id="image_portfolio" src="https://tympanus.net/Tutorials/CircularPortfolio/images/2.png" alt="" width="402" height="402" />
                <img id="image_contact" src="https://tympanus.net/Tutorials/CircularPortfolio/images/3.png" alt="" width="402" height="402" />
            </div>
            <div class="circleBig">
                <div id="menu" class="menu">
                    <a id="about" class="about" href="#">About me</a>
                    <a id="portfolio" class="portfolio" href="#">Portfolio</a>
                    <a id="contact" class="contact" href="#">Contact</a>
                </div>
            </div>
        </div>
        <div id="circle_about" class="circle">
            <div class="description">
                <ul>
                    <li><a href="#">Who I am</a>
                    </li>
                    <li><a href="#">What I do</a>
                    </li>
                    <li><a href="#">My CV</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="circle_portfolio" class="circle">
            <div class="description">
                <div class="thumbs">
                    <a href="https://www.flickr.com/photos/patdavid/4100979060/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/1.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/3793395986/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/2.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/4242525457/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/3.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/3799109785/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/4.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/3871609087/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/5.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/3872388968/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/6.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/3866147681/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/7.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/3872389922/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/8.jpg" alt="" />
                    </a>
                    <a href="https://www.flickr.com/photos/patdavid/4127983465/in/set-72157622106008372/"><img src="https://tympanus.net/Tutorials/CircularPortfolio/thumbs/9.jpg" alt="" />
                    </a>
                </div>
            </div>
        </div>
        <div id="circle_contact" class="circle">
            <div class="description">
                <ul>
                    <li><a href="#">Email</a>
                    </li>
                    <li><a href="#">Twitter</a>
                    </li>
                    <li><a href="#">Facebook</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/CircularPortfolio/jquery.path.js"></script>
    <script type="text/javascript">
        $(function() {

/* when page loads animate the about section by default */
            //move($('#about'),2000,2);

$('#menu > a').mouseover(
                function() {
                    var $this = $(this);
                    move($this, 800, 1);
                }
            );

/*
            function to animate / show one circle.
            speed is the time it takes to show the circle
            turns is the turns the circle gives around the big circle
             */
            function move($elem, speed, turns) {
                var id = $elem.attr('id');
                var $circle = $('#circle_' + id);

/* if hover the same one nothing happens */
                if ($circle.css('opacity') == 1)
                    return;

/* change the image */
                $('#image_' + id).stop(true, true).fadeIn(650).siblings().not(this).fadeOut(650);

/*
                if there's a circle already, then let's remove it:
                either animate it in a circular movement or just fading out, depending on the current position of it
                 */
                $('#content .circle').each(function(i) {
                    var $theCircle = $(this);
                    if ($theCircle.css('opacity') == 1)
                        $theCircle.stop()
                        .animate({
                            path: new $.path.arc({
                                center: [409, 359],
                                radius: 257,
                                start: 65,
                                end: -110,
                                dir: -1
                            }),
                            opacity: '0'
                        }, 1500);
                    else
                        $theCircle.stop()
                        .animate({
                            opacity: '0'
                        }, 200);
                });

/* make the circle appear in a circular movement */
                var end = 65 - 360 * (turns - 1);
                $circle.stop()
                    .animate({
                        path: new $.path.arc({
                            center: [409, 359],
                            radius: 257,
                            start: 180,
                            end: end,
                            dir: -1
                        }),
                        opacity: '1'
                    }, speed);
            }
        });
    </script>

</body>

</html>

鼠标悬停在圆形用户头像上的菜单栏（About me等），会出现沿着圆周旋转的信息提示框。

模板，教程

编辑器支持Emmet

快捷键

鼠标悬停在圆形用户头像上的菜单栏（About me等），会出现沿着圆周旋转的信息提示框。

模板，教程

使用jQuery.Windy.js插件实现微风吹拂动画的图片浏览 - 随机方向

使用jQuery分词插件和CSS3动画实现的电影字幕风格文本序列动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：