[英]Circle Navigation Effect with jQuery
I am very new to jQuery and would like to animate a circle button on my web page. 我是jQuery的新手,想在我的网页上设置一个圆形按钮。
From finding a fiddle I adapted it as far as I could with my limited Javascript knowledge. 通过找到一个小提琴,我尽可能地利用我有限的Javascript知识对其进行了调整。 Here is my current Demo . 这是我目前的演示 。
My Demo : http://jsfiddle.net/FcBPh 我的演示 : http : //jsfiddle.net/FcBPh
I was wondering if I could do the following with it: 我想知道我是否可以用它做以下事情:
1. Fix the circle element to one position. 1.将圆形元素固定到一个位置。 Currently it expands outwards in equal direction, I'd like to expand but still remain in the same position - so perhaps it opens out to the right? 目前它向相同方向向外扩展,我想扩大但仍然保持相同的位置 - 所以它可能向右开放?
2. Is it possible to stick the 'placehold' graphic outside the circle, so it pokes out a little? 2.是否可以将“占位”图形粘贴在圆圈之外,所以它会戳出一点?
My HTML: 我的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 使用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 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;
}
Many thanks for any pointers with this. 非常感谢任何指针。
To fix the circle element to the top left so it expands to the bottom right, comment out these two lines: 要将圆形元素固定在左上方,使其向右扩展,请注释掉这两行:
"left": circle.left - ( expand / 2 ) + "px",
"top": circle.top - ( expand / 2 ) + "px",
And to make the contents of the circle stick outside of it, remove overflow:hidden;
并将圆圈内容放在它外面,去掉overflow:hidden;
in the CSS for the .circle
element. 在.circle
元素的CSS中。
尝试在css中删除此行
overflow: hidden;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.