以下是 jquery圆圈转动菜单特效特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Animated Circular Portfolio with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Animated Circular Portfolio with jQuery" />
<meta name="keywords" content="jquery, animate, circle, round, portfolio, design, tutorial"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#a7cede url(bg.png) no-repeat top right;
}
.title{
position:absolute;
top:0px;
left:0px;
width:130px;
height:570px;
background:#a7cede url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat 0px 0px;
position:absolute;
width:150px;
height:27px;
outline:none;
top:2px;
right:0px;
}
</style>
<!--[if IE]>
<style>
.circle{
background:transparent url(images/circleIE.gif) no-repeat top left;
}
.description ul a{
font-weight:normal;
}
</style>
<![endif]-->
</head>
<body>
<div id="content">
<div class="title"></div>
<a class="back" href="#"></a>
<div class="wrapper">
<div id="images" class="images">
<img id="image_about" src="images/1.png" alt="" width="402" height="402" style="display:block;"/>
<img id="image_portfolio" src="images/2.png" alt="" width="402" height="402"/>
<img id="image_contact" src="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="#"><img src="thumbs/1.jpg" alt=""/></a>
<a href="#"><img src="thumbs/2.jpg" alt=""/></a>
<a href="#"><img src="thumbs/3.jpg" alt=""/></a>
<a href="#"><img src="thumbs/4.jpg" alt=""/></a>
<a href="#"><img src="thumbs/5.jpg" alt=""/></a>
<a href="#"><img src="thumbs/6.jpg" alt=""/></a>
<a href="#"><img src="thumbs/7.jpg" alt=""/></a>
<a href="#"><img src="thumbs/8.jpg" alt=""/></a>
<a href="#"><img src="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>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="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>
JS代码(jquery.path.js):
/* * jQuery css bezier animation support -- Jonah Fox * version 0.0.1 * Released under the MIT license. */
/* var path = $.path.bezier({
start:{
x:10,y:10,angle:20,length:0.3}
,end:{
x:20,y:30,angle:-20,length:0.2}
}
) $("myobj").animate({
path:path}
,duration)*/
;
(function($){
$.path ={
}
var V ={
rotate:function(p,degrees){
var radians = degrees * 3.141592654 / 180 var c = Math.cos(radians),s = Math.sin(radians) return [c*p[0] - s*p[1],s*p[0] + c*p[1] ]}
,scale:function(p,n){
return [n*p[0],n*p[1]]}
,add:function(a,b){
return [a[0]+b[0],a[1]+b[1]]}
,minus:function(a,b){
return [a[0]-b[0],a[1]-b[1]]}
}
$.path.bezier = function( params ){
params.start = $.extend({
angle:0,length:0.3333}
,params.start )params.end = $.extend({
angle:0,length:0.3333}
,params.end ) this.p1 = [params.start.x,params.start.y];
this.p4 = [params.end.x,params.end.y];
var v14 = V.minus(this.p4,this.p1) var v12 = V.scale(v14,params.start.length) v12 = V.rotate(v12,params.start.angle) this.p2 = V.add(this.p1,v12) var v41 = V.scale(v14,-1) var v43 = V.scale(v41,params.end.length) v43 = V.rotate(v43,params.end.angle) this.p3 = V.add(this.p4,v43) this.f1 = function(t){
return (t*t*t);
}
this.f2 = function(t){
return (3*t*t*(1-t));
}
this.f3 = function(t){
return (3*t*(1-t)*(1-t));
}
this.f4 = function(t){
return ((1-t)*(1-t)*(1-t));
}
/* p from 0 to 1 */
this.css = function(p){
var f1 = this.f1(p),f2 = this.f2(p),f3 = this.f3(p),f4=this.f4(p) var x = this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4;
var y = this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4;
return{
top:y + "px",left:x + "px"}
}
}
$.path.arc = function(params){
for(var i in params) this[i] = params[i] this.dir = this.dir || 1 while(this.start > this.end && this.dir > 0) this.start -= 360 while(this.start < this.end && this.dir < 0) this.start += 360 this.css = function(p){
var a = this.start * (p ) + this.end * (1-(p )) a = a * 3.1415927 / 180 // to radians var x = Math.sin(a) * this.radius + this.center[0] var y = Math.cos(a) * this.radius + this.center[1] return{
top:y + "px",left:x + "px"}
}
}
;
$.fx.step.path = function(fx){
var css = fx.end.css(1 - fx.pos) for(var i in css) fx.elem.style[i] = css[i];
}
}
)(jQuery);
CSS代码(style.css):
.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;}
.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;}
.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);}
.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;}
分享到QQ
分享到微博
微信扫一扫
