jquery 计算运动方向_jQuery惊人的圆周运动效果

jquery 计算运动方向

View demo 查看演示 Download Source 下载源

Today we are going to create a stunning circular motion effect with jQuery. We will be using the jQuery.path plugin to animate a circular movement for a menu in a portfolio example.

今天，我们将使用jQuery创建令人惊叹的圆周运动效果。 在投资组合示例中，我们将使用jQuery.path插件为菜单的圆周运动设置动画。

The idea is to have a rounded content area with a main menu. When hovering over one of the menu items, a sub-menu element appears, circulating around the content area.

这个想法是要有一个带有主菜单的圆形内容区域。 将鼠标悬停在菜单项之一上时，将出现一个子菜单元素，在内容区域周围循环。

Let’s get started!

让我们开始吧！

标记 (The Markup)

The HTML consists of a wrapper that contains the images for the content area and an element for the big content circle. The main menu is inside of the big content circle. Then we define the structure for the three small circles that will appear when hovering over the menu items:

HTML由一个包装器组成，该包装器包含内容区域的图像和大内容圆圈的元素。 主菜单位于大型内容圈子内。 然后，我们将鼠标悬停在菜单项上时为三个小圆圈定义结构：

<div class="wrapper">
	<div id="images" class="images">
		<img id="image_about" src="images/1.png" alt="1" style="display:block;"/>
		<img id="image_portfolio" src="images/2.png" alt="2"/>
		<img id="image_contact" src="images/3.png" alt="3"/>
	</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="#"><img src="thumbs/1.jpg" alt=""/></a>
			<a href="#"><img src="thumbs/2.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>

In two of the three smaller circles we will have a link list. The other circle contains some images.

在三个较小的圈子中的两个圈子中，我们将有一个链接列表。 另一个圆圈包含一些图像。

CSS (The CSS)

We will position most of the elements absolutely since that will make things a lot easier applying the jQuery.path plugin. Let’s start with the style of the first elements:

我们将绝对放置大多数元素，因为使用jQuery.path插件将使事情变得容易得多。 让我们从第一个元素的样式开始：

.wrapper{
    font-family: Verdana;
    font-size:11px;
    width:600px;
    height:600px;
    position:relative;
    top:150px;
    left:200px;
}
.images img{
    display:none;
    position:absolute;
    left:6px;
    top:6px;
}
.circleBig{
    position:absolute;
    top:0px;
    left:0px;
    width:418px;
    height:418px;
    background:transparent url(../images/circlebg.png) no-repeat top left;
}

For the main menu we will be using CSS sprites:

对于主菜单，我们将使用CSS Sprites：

.menu{
    position:absolute;
    width:101px;
    height:74px;
    top:240px;
    left:260px;
    z-index:999;
}
a.about, a.portfolio, a.contact{
    float:left;
    clear:both;
    height:23px;
    margin-bottom:10px;
    width:105px;
    text-indent:-2000000px;
    opacity:0.8;
    background:transparent url(../images/menu.png) no-repeat top left;
}
a.portfolio{
    width:90px;
    background-position:-105px 0px;
}
a.contact{
    width:88px;
    background-position:-199px 0px;
}
a.about:hover, a.portfolio:hover, a.contact:hover{
    opacity:1.0;
}

The circle needs to be positioned correctly for the usage of the jQuery.path plugin. So we need to “pull” it into place by adding a negative margin of half of the width, or height, respectively.

圆形需要正确定位才能使用jQuery.path插件。 因此，我们需要通过分别添加宽度或高度一半的负边距来“拉”它。

.circle{
    margin-top:-88px;
    margin-left:-88px;
    width:176px;
    height:176px;
    position:absolute;
    left:0;
    top:0;
    background:transparent url(../images/circle.png) no-repeat top left;
    z-index:10;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

The style for the descriptions inside of the small circle will be as follows:

小圆圈内的描述样式如下：

.description{
    width:120px;
    margin:40px auto;
    text-align:center;
}
.description ul{
    list-style:none;
    text-align:center;
}
.description ul a{
    line-height:30px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    text-shadow:1px 1px 1px #aaa;
}
.description ul a:hover{
    color:#f0f0f0;
}
.thumbs a img{
    border:3px solid #f9f9f9;
    -moz-box-shadow:1px 1px 2px #999;
    -webkit-box-shadow:1px 1px 2px #999;
    box-shadow:1px 1px 2px #999;
}

Text-shadow and box-shadow are CSS3 properties that will not work in any IE browser.

文本阴影和框形阴影是CSS3属性，在任何IE浏览器中均不起作用。

OK, let’s add the magic.

好吧，让我们添加魔法。

JavaScript (The JavaScript)

In order to use the jQuery.path plugin we need to define the center and radius of the imaginary circle that will be used for the rotation of the small circle. In our case the imaginary circle is the bigger circle, the “circleBig” class image. The following formula gives us the center coordinates: center x = Absolute left of circleBig + radius of circleBig center y = Absolute top of circleBig + radius of circleBig radius r = Width circleBig / 2

为了使用jQuery.path插件，我们需要定义假想圆的中心和半径，该假想圆将用于小圆的旋转。 在我们的例子中，假想圆是较大的圆，即“ circleBig”类图像。 以下公式为我们提供了中心坐标： center x = Absolute left of circleBig + radius of circleBig center y = Absolute top of circleBig + radius of circleBig center x = Absolute left of circleBig + radius of circleBig center y = Absolute top of circleBig + radius of circleBig radius r = Width circleBig / 2

$(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);
	}
});

And that’s it! Enjoy!

就是这样！ 请享用！

642-832 online training to learn jQuery and other web applications. Download the 642-832在线培训，以学习jQuery和其他Web应用程序。 下载 640-822 tutorials and 640-822教程和 640-816 study guide to learn all about jquery plugins. 640-816学习指南，以全面了解jquery插件。

翻译自: https://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

jquery 计算运动方向