使用jQuery進行圓形導航效果

Question

我是jQuery的新手，想在我的網頁上設置一個圓形按鈕。

通過找到一個小提琴，我盡可能地利用我有限的Javascript知識對其進行了調整。 這是我目前的演示 。

我的演示 ： http ： //jsfiddle.net/FcBPh

我想知道我是否可以用它做以下事情：

1.將圓形元素固定到一個位置。 目前它向相同方向向外擴展，我想擴大但仍然保持相同的位置 - 所以它可能向右開放？

2.是否可以將“占位”圖形粘貼在圓圈之外，所以它會戳出一點？

我的HTML：

<div id="seven" class="circle">
    <div><img src="http://placehold.it/100x100" style="position:relative;margin-top:-20px" /></div>
    <div style="float:left;margin-left:100px">click me. texty text, some long text wrapping</div>
</div>

使用Javascript

//setup
$( ".circle" ).each( function() {

    var radius = $( this ).outerWidth() / 2,
        left = $( this ).offset().left,
        top = $( this ).offset().top;

    $( this ).data( { 

        "radius": radius, 
        "left": left, 
        "top": top,
        "clicked": false

    } );

    $( "body" ).data ( { "hovering":false } );

} );

//move and expand
function setLocations( circle, expand, event )  {

    var $this = $( circle ),
        circle = $this.data(),
        hoveredX = circle.left + circle.radius,
        hoveredY = circle.top + circle.radius;

    $( "body" ).data( "hovering", true );

    //expand circle you're over
    $this.animate( { 

        "width": ( 2 * circle.radius ) + expand + "px",
        "height": ( 2 * circle.radius ) + expand + "px",
        "left": circle.left - ( expand / 2 ) + "px",
        "top": circle.top - ( expand / 2 ) + "px",
        "border-top-left-radius": circle.radius + ( expand / 2 ) + "px",
        "border-top-right-radius": circle.radius + ( expand / 2 ) + "px",
        "border-bottom-left-radius": circle.radius + ( expand / 2 ) + "px",
        "border-bottom-right-radius": circle.radius + ( expand / 2 ) + "px"

    }, 75 );

    //images have to be done separately
    $this.children( "img" ).animate( { 

        "border-top-left-radius": circle.radius + ( expand / 2 ) + "px",
        "border-top-right-radius": circle.radius + ( expand / 2 ) + "px",
        "border-bottom-left-radius": circle.radius + ( expand / 2 ) + "px",
        "border-bottom-right-radius": circle.radius + ( expand / 2 ) + "px"

    }, 75 );

    //text in circle
    if( $this.children( "div" ).length ) {

        var h = circle.radius + ( expand / 2 ),
            a = h / Math.sqrt( 2 ),
            size = 2 * a,
            padding = h - a;

        $this.children( "div" ).animate( { 

            "left": padding,
            "top": padding,
            "width": size,
            "height": size

        }, 75 );

    };

    //move other cicles out of the way
    $this.siblings( ".circle" ).each( function() {
        debugger;
        var $this = $( this );
        var circle = $this.data();
        var circleX = circle.left + circle.radius;
        var circleY = circle.top + circle.radius;
        var angle = Math.atan2(hoveredY - circleY, hoveredX - circleX);
        var topMove = ((expand /2 ) * Math.sin(angle));
        var leftMove = ((expand /2 ) * Math.cos(angle));

        $this.animate( { 

            "left": "-=" + leftMove + "px",
            "top":  "-=" + topMove + "px"

        }, 75 );

    });

};

//put everything back the way it was
function resetLocations() {

    $( ".circle" ).each( function() {

        var $this = $( this ),
            circle = $this.data();

         $this.stop().animate( { 

            "width": ( 2 * circle.radius ) + "px",
            "height": ( 2 * circle.radius ) + "px",
            "left": circle.left + "px",
            "top": circle.top + "px",
            "border-top-left-radius": circle.radius + "px",
            "border-top-right-radius": circle.radius + "px",
            "border-bottom-left-radius": circle.radius + "px",
            "border-bottom-right-radius": circle.radius + "px"

        }, 75 );

        $this.children( "img" ).stop().animate( { 

            "border-top-left-radius": circle.radius + "px",
            "border-top-right-radius": circle.radius + "px",
            "border-bottom-left-radius": circle.radius + "px",
            "border-bottom-right-radius": circle.radius + "px"

        }, 75 );

        if( $this.children( "div" ).length ) {

            var h = circle.radius,
                a = h / Math.sqrt( 2 ),
                size = 2 * a,
                padding = h - a;

            $this.children( "div" ).animate( { 
                "left": padding,
                "top": padding,
                "width": size,
                "height": size

            }, 75 );

        };

    } );

    $( "body" ).data( "hovering", false );

};

//is mouse inside circle or in "corner" of div
function inCircle( circle, x, y ) {

    var radius = circle.outerWidth() / 2,
        circleX = circle.offset().left + radius,
        circleY = circle.offset().top + radius,
        xDiff = ( circleX - x ),
        yDiff = ( circleY - y ),
        mouseDistance = Math.sqrt( ( xDiff * xDiff ) + ( yDiff * yDiff ) );

    return ( mouseDistance > radius ? false : true );

};

$( ".circle" ).mouseleave( function( event ) {

    resetLocations();
    $( this ).data( "clicked", false );

});

$( ".circle" ).mousemove( function( event ) {

    if( inCircle( $( this ), event.pageX, event.pageY ) ) {

        if ( !$( "body" ).data( "hovering" ) ) {

            setLocations( this, 40, event );

        };

    } else {

        if ( $( "body" ).data( "hovering" ) ) {

            resetLocations();
            $( this ).data( "clicked", false );

        };

    };

});

$( ".circle" ).click( function( event ) {

    if( $( this ).data( "clicked" ) ) {

        resetLocations();
        $( this ).data( "clicked", false );

    } else {

        if( inCircle( $( this ), event.pageX, event.pageY ) ) {

            $( this ).data( "clicked", true );
            setLocations( this, 200, event );

        } else {

            resetLocations();
            $( this ).data( "clicked", false );

        };

    };

});

CSS

.circle {
    background-color: black;
    overflow: hidden;
    position: absolute;
}

#seven
{
    background-color: transparent;
    border: 1px solid black;
    width: 80px;
    height: 80px;
    border-radius: 90px;
    top: 40px;
    left: 40px;
}

#seven div
{
    /* h=radius, a=h/sqrt(2), height=width=2a, left=top=h-a */
    height: 128px;
    left: 26px; 
    position: absolute;
    top: 26px;
    width: 128px;

}

非常感謝任何指針。

Answer 1

要將圓形元素固定在左上方，使其向右擴展，請注釋掉這兩行：

"left": circle.left - ( expand / 2 ) + "px",
"top": circle.top - ( expand / 2 ) + "px",

並將圓圈內容放在它外面，去掉overflow:hidden; 在.circle元素的CSS中。

Answer 2

嘗試在css中刪除此行

overflow: hidden;