jquery点击弹出图标环形菜单代码

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

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

以下是 jquery点击弹出图标环形菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击弹出图标环形菜单代码</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/mobilyblocks.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#fff;}
body{font-family:Arial, Helvetica, sans-serif;background:#F1F1F1;}
/* comp */
div.comp{background:url(images/7.png) no-repeat center center;width:200px;height:200px;display:block;cursor:pointer;position:relative;margin:230px auto 0 auto;}
div.comp ul.reset li{position:absolute;}
</style>

<script type="text/javascript">
$(function(){
	$('.comp').mobilyblocks({
		trigger:'click',
		direction:'counter',
		duration:500,
		zIndex:50,
		widthMultiplier:1.1
	});
});
</script>
</head>
<body>
<div class="comp" title="点我试试看">
	<ul class="reset" style="display: block; z-index: 50; opacity:0;">
		<li><a href="#"><img src="images/2.png" alt="" /></a></li>
		<li><a href="#"><img src="images/3.png" alt="" /></a></li>
		<li><a href="#"><img src="images/4.png" alt="" /></a></li>
		<li><a href="#"><img src="images/5.png" alt="" /></a></li>
		<li><a href="#"><img src="images/6.png" alt="" /></a></li>
		<li><a href="#"><img src="images/7.png" alt="" /></a></li>
		<li><a href="#"><img src="images/8.png" alt="" /></a></li>
	</ul>
</div>
</body>
</html>

JS代码(mobilyblocks.js):

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

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