Para eso, requiere del uso de la librería jQuery que debemos tener cargada antes de </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="URL_script.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var deg=0;
var dif=-3;
var arr = $('.btn');
var len = arr.length;
var centerX = $('#stage').width()/2 - 40;
var centerY = $('#stage').height()/2 - 60;
arr.css('position','absolute');
setInterval(function(){
if(Math.abs(dif)<0.5) return false;
deg+=dif;
$.each(arr,function(i){
var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);
$(this).css({
top:centerY+25*eSin,
left:centerX+90*eCos,
opacity:0.8+eSin*0.2,
zIndex:Math.round(80+eSin*20)
});
})
},40);
var over=false;
$("#stage").mousemove(function(e){
if(!this.leftOffset) {
this.leftOffset = $(this).offset().left;
this.width = $(this).width();
}
if(over) dif=0;
else
dif = -5+(10*((e.pageX-this.leftOffset)/this.width));
});
$(".bcontent").hover(
function(){over=true;dif=0;},
function(){over=false;}
);
});
//]]>
</script>
<style type="text/css">
#share {
-moz-border-radius: 10px;
background: #FFF;
height: 220px;
margin: 20px auto;
overflow: hidden;
width: 270px;
}
#stage {
height: 220px;
position: relative;
width: 270px;
}
.btn {
background-color: #FFF;
float: left;
height: 90px;
left: 0;
margin: 20px 0 0 10px;
position: relative;
top: 0;
width: 60px;
}
.bcontent {
bottom: 20px;
left: 0;
position: absolute;
top: auto;
}
/* y las imágenes de los servicios a agregar */
.digg {background:url(imagenDIGG.png) no-repeat -4px bottom;}
.reddit {background:url(imagenREDDIT.png) no-repeat -4px bottom;}
.facebook {background:url(imagenFACEBOOK.png) no-repeat bottom center;}
.tweetmeme {background:url(imagenTWITTER.png) no-repeat -5px bottom;}
.dzone {background:url(imagenDZONE.png) no-repeat -7px bottom;}
</style>
<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>
<div class="btn miServicio">
<div class="bcontent">
....... y aquí colocarlemos el enlace o script de ese servicio .......
</div>
</div>
0 comentarios:
Publicar un comentario