jQuery鼠标经过弹出圆环菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标经过弹出圆环菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery鼠标经过弹出圆环菜单代码 </title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>
<script  type="text/javascript">
$(function(){
	$('.nature').mobilyblocks({
		trigger: 'hover', //触发的方式
		direction: 'counter', //动画方向
		duration:500,  //动画持续时间
		zIndex:50,  //z-inde值
		widthMultiplier:1.15  //宽度的倍数
	});
});
</script>
</head>

<body>
<div id="content">
  <div class="nature">
    <h1>主菜单</h1>
    <ul class="reset">
      <li><a href="#">jqeury</a></li>
      <li><a href="#">jqeury下载</a></li>
      <li><a href="#">jquery插件</a></li>
      <li><a href="#">jquery教程</a></li>
      <li><a href="#">站长随记</a></li>
      <li><a href="#">留言</a></li>
      <li><a href="#">jQ大神</a></li>
    </ul>
  </div>
</div>
</body>
</html>

JS代码(mobilyblocks.js):

/* ========================================================== * MobilyBlocks * date:29.11.2010 * last update:25.1.2011 * author:Marcin Dziewulski * web:http://www.mobily.pl or http://playground.mobily.pl * email:hello@mobily.pl * Free to use under the MIT license.========================================================== */
(function($){
	$.fn.mobilyblocks=function(options){
	var defaults={
	trigger:"click",direction:"clockwise",duration:750,zIndex:10,widthMultiplier:1.2}
;
	var sets=$.extend({
}
,defaults,options);
	return this.each(function(){
	var $t=$(this),w=$t.width(),h=$t.height(),parent=$t.find("ul"),list=parent.find("li"),size=list.length,hov=false,dir;
	if(sets.direction=="clockwise"){
	dir=-1}
else{
	if(sets.direction=="counter"){
	dir=1}
}
var socials={
	init:function(){
	parent.hide().css({
	zIndex:sets.zIndex}
);
	$t.append($("<a />").addClass("trigger").css({
	display:"block",position:"absolute",zIndex:1,top:0,left:0,width:"100%",height:"100%"}
));
	switch(sets.trigger){
	case"click":socials.click();
	break;
	case"hover":socials.hover();
	break;
	default:socials.click()}
}
,click:function(){
	var trigger=$t.find("a.trigger");
	trigger.bind("click",function(){
	if($t.hasClass("close")){
	parent.fadeTo(sets.duration,0);
	socials.animation.close();
	$t.removeClass("close")}
else{
	parent.fadeTo(sets.duration,1);
	socials.animation.open();
	$t.addClass("close")}
return false}
)}
,hover:function(){
	var trigger=$t.find("a.trigger");
	trigger.bind("mouseover",function(){
	if(hov==false){
	parent.fadeTo(sets.duration,1);
	socials.animation.open();
	$t.addClass("close")}
}
);
	parent.bind("mouseleave",function(){
	$t.removeClass("close");
	parent.fadeTo(sets.duration,0);
	socials.animation.close();
	hov=true;
	setTimeout(function(){
	hov=false}
,500)}
)}
,animation:{
	open:function(){
	socials.ie.open();
	list.each(function(i){
	var li=$(this);
	li.animate({
	path:new $.path.arc({
	center:[0,0],radius:w*sets.widthMultiplier,start:0,end:360/size*i,dir:dir}
)}
,sets.duration)}
);
	list.hover(function(){
	var li=$(this);
	li.css({
	zIndex:sets.zIndex}
).siblings("li").css({
	zIndex:sets.zIndex-1}
)}
)}
,close:function(){
	list.each(function(i){
	var li=$(this);
	li.animate({
	top:0,left:0}
,sets.duration,function(){
	socials.ie.close()}
)}
)}
}
,ie:{
	open:function(){
	if($.browser.msie){
	list.show()}
}
,close:function(){
	if($.browser.msie){
	list.hide()}
}
}
}
;
	socials.init()}
)}
}
(jQuery));
	(function($){
	$.path={
}
;
	$.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;
	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代码(default.css):

*{padding:0;margin:0;border:0;font-family:"微软雅黑";}
/* ------ mobilyblocks-----------------------------------------------*/
.nature{display:block;width:150px;height:150px;text-align:center;line-height:150px;color:#FF0;text-shadow:1px 1px 1px rgba(0,0,0,.3);cursor:pointer;position:relative;-moz-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;margin:0 auto;background:linear-gradient(#F90,#F93);/* 标准的语法 */
box-shadow:2px 3px 8px #999;}
ul.reset,ul.reset li{display:block;list-style:none;padding:0;margin:0;}
ul.reset li{position:absolute;border-radius:50%;width:140px;height:140px;text-align:center;line-height:140px;;background:linear-gradient(#F7F7F7,#DBDBDB);/* 标准的语法 */
box-shadow:1px 1px 8px #999;}
ul.reset li a{outline:none;text-shadow:none;}
#content{margin:300px auto 0;width:560px;}
a{color:#F60;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)