jQuery旋转展开分享按钮js代码

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

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

以下是 jQuery旋转展开分享按钮js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery旋转展开分享按钮</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
	<div id="content">
		<div class="socials">
			<ul class="reset">
				<li><a href="#"><img src="img/socials/delicious.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/digg.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/google.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/technorati.png" alt="" /></a></li>
				<li><a href="#"><img src="img/socials/twitter.png" alt="" /></a></li>
			</ul>			
		</div>	
		
		<div class="nature">
			<ul class="reset">
				<li><a href="#"><img src="img/nature/img2.png" alt="" /></a></li>
				<li><a href="#"><img src="img/nature/img3.png" alt="" /></a></li>
				<li><a href="#"><img src="img/nature/img4.png" alt="" /></a></li>
				<li><a href="#"><img src="img/nature/img5.png" alt="" /></a></li>
				<li><a href="#"><img src="img/nature/img6.png" alt="" /></a></li>
				<li><a href="#"><img src="img/nature/img2.png" alt="" /></a></li>
				<li><a href="#"><img src="img/nature/img3.png" alt="" /></a></li>
			</ul>			
		</div>	
	</div>
</body>
</html>

JS代码(init.js):

$(function(){
	$('.socials').mobilyblocks();
	$('.nature').mobilyblocks({
	trigger:'hover',direction:'counter',duration:500,zIndex:50,widthMultiplier:1.15}
);
}
);

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):

/* ------ general-----------------------------------------------*/
body{font-family:Arial,Helvetica,sans-serif;background:#F1F1F1;}
/* ------ mobilyblocks-----------------------------------------------*/
.socials{display:block;width:32px;height:32px;background:url(../img/socials/share.png) no-repeat;cursor:pointer;position:relative;}
.nature{display:block;width:150px;height:150px;background:url(../img/nature/img1.png) no-repeat;cursor:pointer;position:relative;}
.socials,.nature{margin:0 auto;}
.socials{margin-bottom:50px;}
ul.reset,ul.reset li{display:block;list-style:none;padding:0;margin:0;}
ul.reset li{position:absolute;}
ul.reset li a{outline:none;}
#content{margin:100px auto 0;width:560px;}
a{color:#FF9900;}
a img{border:none;}

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