Share-кнопки

Крутящиеся share-кнопки. Понадобится подключенная jQuery.


Адаптированная версия под html виджет blogger'а.

Демо (полная версия):

Share

<div id="share">
<div id="stage">

<div class="btn digg">
<div class="bcontent">
<a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>
</div>
<div class="btn tweetmeme">
<div class="bcontent">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>
</div>
<div class="btn dzone">
<div class="bcontent">
<script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div>
</div>
<div class="btn reddit">
<div class="bcontent">
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div>
</div>
<div class="btn facebook">
<div class="bcontent">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
</div>

</div>
</div>

<style>
#share{
	/* The share box container */
	width:290px;
	background:#fffff;
	height:170px;
	margin:0px auto;
	overflow:hidden;

	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

#stage{
	/* This is where the animation takes place */
	position:relative;
	width:290px;
	height:170px;
	background:white;
	float:left;

	border-bottom-left-radius:12px;
	border-top-left-radius:12px;

	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-topleft:12px;

	-webkit-border-bottom-left-radius:12px;
	-webkit-border-top-left-radius:12px;
}

.btn{
	/* This class is assigned to every share button */
	background-color:white;
	height:90px;
	left:0;
	top:0;
	width:60px;
	position:relative;
	margin:20px 0 0 10px;
	float:left;
}

.bcontent{
	/* Positioned inside the .btn container */
	position:absolute;
	top:auto;
	bottom:20px;
	left:0;
}

/* Individual rules for every share button */

.digg{	background:url(http://1.bp.blogspot.com/-eq-HzLYSMt0/TkQy92AIFJI/AAAAAAAAFuM/xNd08wxG9j0/s1600/digg_reflection.png) no-repeat -4px bottom;}
.reddit{	background:url(http://3.bp.blogspot.com/-IXBiCUFQtps/TkQy9MbQ-4I/AAAAAAAAFuA/Py2EWWFd-RA/s1600/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{	background:url(http://1.bp.blogspot.com/-Paon88Bs5Yg/TkQy9PqfQXI/AAAAAAAAFuE/R2L_LoXrtGM/s1600/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{	background:url(http://3.bp.blogspot.com/-HR0IZ9DIT4U/TkQy8-ofmeI/AAAAAAAAFt8/4kKUl7KW5ZE/s1600/twit_reflection.png) no-repeat -5px bottom;}
.dzone{	background:url(http://3.bp.blogspot.com/-eOKOx-IbvQg/TkQy9nQe8xI/AAAAAAAAFuI/2Xeklf8G3ds/s1600/dzone_reflection.png) no-repeat -7px bottom;}

/* Customizing the facebook share button */

span.fb_share_no_count {
	display:block;
}

span.fb_share_count_top.fb_share_no_count {
	line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
	display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
	background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
	display:block;
}

</style>

<script>
$(document).ready(function(){

	/* This code is run on page load */

	var deg=0;
	var dif=-3;

	/* Assigning the buttons to a variable for speed: */
	var arr = $('.btn');

	/* Caching the length of the array in a vаriable: */
	var len = arr.length;

	/* Finding the centers of the animation container: */
	var centerX = $('#stage').width()/2 - 40;
	var centerY = $('#stage').height()/2 - 60;

	/* Applying relative positioning to the buttons: */
	arr.css('position','absolute');

	/* The function inside the interval is run 25 times per second */
	setInterval(function(){

		/* This forms an area with no activity on mouse move in the middle of the stage */
		if(Math.abs(dif)<0.5) return false;

		/* Increment the angle: */
		deg+=dif;

		/* Loop through all the buttons: */
		$.each(arr,function(i){

			/* Calculate the sine and cosine with the new angle */
			var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
			var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);

			/* Setting the css properties */
			$(this).css({
				top:centerY+25*eSin,
				left:centerX+90*eCos,
				opacity:0.8+eSin*0.2,
				zIndex:Math.round(80+eSin*20)
			});
		})
	},40);

	/* Detecting the movements of the mouse and speeding up or reversing the rotation accordingly: */
	var over=false;
	$("#stage").mousemove(function(e){

		if(!this.leftOffset)
		{
			/* This if section is only run the first time the function is executed. */
			this.leftOffset = $(this).offset().left;
			this.width = $(this).width();
		}

		/* If the mouse is over a button, set dif to 0, which halts the animation */
		if(over) dif=0;
		else
			dif = -5+(10*((e.pageX-this.leftOffset)/this.width));

		/* In the other case calculate the speed according to the X position of the mouse */
	});

	/* Detecting whether the mouse is positioned above a share button: */
	$(".bcontent").hover(
		function(){over=true;dif=0;},
		function(){over=false;}
	);
});
</script>

Демо (укороченная):

Share

<div id="share">
<div id="stage">

<div class="btn tweetmeme">
<div class="bcontent">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>
</div>
<div class="btn facebook">
<div class="bcontent">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
</div>

</div>
</div>

<style>
#share{
	/* The share box container */
	width:290px;
	background:#fffff;
	height:170px;
	margin:0px auto;
	overflow:hidden;

	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

#stage{
	/* This is where the animation takes place */
	position:relative;
	width:290px;
	height:170px;
	background:white;
	float:left;

	border-bottom-left-radius:12px;
	border-top-left-radius:12px;

	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-topleft:12px;

	-webkit-border-bottom-left-radius:12px;
	-webkit-border-top-left-radius:12px;
}

.btn{
	/* This class is assigned to every share button */
	background-color:white;
	height:90px;
	left:0;
	top:0;
	width:60px;
	position:relative;
	margin:20px 0 0 10px;
	float:left;
}

.bcontent{
	/* Positioned inside the .btn container */
	position:absolute;
	top:auto;
	bottom:20px;
	left:0;
}

/* Individual rules for every share button */

.facebook{	background:url(http://1.bp.blogspot.com/-Paon88Bs5Yg/TkQy9PqfQXI/AAAAAAAAFuE/R2L_LoXrtGM/s1600/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{	background:url(http://3.bp.blogspot.com/-HR0IZ9DIT4U/TkQy8-ofmeI/AAAAAAAAFt8/4kKUl7KW5ZE/s1600/twit_reflection.png) no-repeat -5px bottom;}
/* Customizing the facebook share button */

span.fb_share_no_count {
	display:block;
}

span.fb_share_count_top.fb_share_no_count {
	line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
	display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
	background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
	display:block;
}

</style>

<script>
$(document).ready(function(){

	/* This code is run on page load */

	var deg=0;
	var dif=-3;

	/* Assigning the buttons to a variable for speed: */
	var arr = $('.btn');

	/* Caching the length of the array in a vаriable: */
	var len = arr.length;

	/* Finding the centers of the animation container: */
	var centerX = $('#stage').width()/2 - 40;
	var centerY = $('#stage').height()/2 - 60;

	/* Applying relative positioning to the buttons: */
	arr.css('position','absolute');

	/* The function inside the interval is run 25 times per second */
	setInterval(function(){

		/* This forms an area with no activity on mouse move in the middle of the stage */
		if(Math.abs(dif)<0.5) return false;

		/* Increment the angle: */
		deg+=dif;

		/* Loop through all the buttons: */
		$.each(arr,function(i){

			/* Calculate the sine and cosine with the new angle */
			var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
			var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);

			/* Setting the css properties */
			$(this).css({
				top:centerY+25*eSin,
				left:centerX+90*eCos,
				opacity:0.8+eSin*0.2,
				zIndex:Math.round(80+eSin*20)
			});
		})
	},40);

	/* Detecting the movements of the mouse and speeding up or reversing the rotation accordingly: */
	var over=false;
	$("#stage").mousemove(function(e){

		if(!this.leftOffset)
		{
			/* This if section is only run the first time the function is executed. */
			this.leftOffset = $(this).offset().left;
			this.width = $(this).width();
		}

		/* If the mouse is over a button, set dif to 0, which halts the animation */
		if(over) dif=0;
		else
			dif = -5+(10*((e.pageX-this.leftOffset)/this.width));

		/* In the other case calculate the speed according to the X position of the mouse */
	});

	/* Detecting whether the mouse is positioned above a share button: */
	$(".bcontent").hover(
		function(){over=true;dif=0;},
		function(){over=false;}
	);
});
</script>

Источник тут. Подробности с установкой читайте в продолжении "Share-кнопки (подробности, код).