Пытаюсь стащить с google+ кружочки но написать корректно их увелечение и уменьшение не выходит, щас вроде работает пока е начинаешь по ним быстро водить.
делюсь кодом
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.HO').find('.wy').css({
top:$('.HO').height()/2-$('.HO').find('.wy').height()/2,
left:$('.HO').width()/2-$('.HO').find('.wy').width()/2
})
var position = $('.HO').offset();
position.top=31;
position.left=31;
$('.HO').hover(function(){
$(this).addClass('NO-Ca qD')
.css({'top':position.top, 'left':position.left});
$(this).animate({
'height':182,
'width':182,
'top':2,
'left':2
},100,function(){
$(this).removeClass('HO OO');
})
.find('.wy').animate({
'top':182/2-$(this).find('.wy').height()/2,
'left':182/2-$(this).find('.wy').width()/2+1
},100)
},function(){
$(this).addClass('HO OO');
$(this).animate({
'height':125,
'width':125,
'left':position.left,
'top':position.top
},100,function(){
$(this)
.css({'top':2, 'left':2})
.removeClass('NO-Ca qD')
})
$(this).find('.wy').animate({
'top':125/2-$(this).find('.wy').height()/2,
'left':125/2-$(this).find('.wy').width()/2
},100)
})
})
</script>
<style type="text/css">
.GO {
position: relative;
vertical-align: top;
width: 187px;
height: 187px;
}
.a-l-k {
display: inline-block;
position: relative;
}
.OO {
background-image: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_closed.png");
}
.HO {
background-repeat: no-repeat;
border-radius: 63px 63px 63px 63px;
height: 125px;
margin: 31px;
position: relative;
vertical-align: top;
width: 125px;
z-index: 5;
}
.SS {
background-image: url("//ssl.gstatic.com/s2/oz/images/sge/glow_only.png");
background-repeat: no-repeat;
height: 151px;
margin: 18px;
position: absolute;
top: 0;
width: 151px;
}
.IS {
height: 183px;
left: 0;
margin: 2px;
position: absolute;
top: 0;
width: 183px;
}
.wy {
color: #FFFFFF;
cursor: pointer;
font-size: 13px;
position: relative;
text-align: center;
width: 88px;
}
.wy {
color: #FFFFFF;
cursor: pointer;
font-size: 13px;
text-align: center;
}
.Hs {
display: block;
}
.JO {
font-size: 16px;
font-weight: bold;
margin-top: 4px;
opacity: 0.5;
}
.NO-Ca {
background: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_open.png") no-repeat center center;
}
.qD {
background-repeat: no-repeat;
border-radius: 92px 92px 92px 92px;
height: 183px;
margin: 2px;
position: relative;
vertical-align: top;
width: 183px;
z-index: 2;
}
.MO {
background-image: url("//ssl.gstatic.com/s2/oz/images/sge/new_circle_closed.png");
}
.LO-Ca {
background-image: url("//ssl.gstatic.com/s2/oz/images/sge/new_circle_open.png");
}
.qD.sD {
background-image: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_highlighted.png");
}
.rD.sD {
background-image: url("//ssl.gstatic.com/s2/oz/images/sge/new_circle_highlighted.png");
}
.uN {
cursor: url("//ssl.gstatic.com/s2/oz/images/sge/openhand_8_8.cur"), move;
font-size: 9px;
padding: 2px;
position: absolute;
}
.TS {
background-position: center center;
background-repeat: no-repeat;
background-size: 30px auto;
border-radius: 15px 15px 15px 15px;
cursor: url("//ssl.gstatic.com/s2/oz/images/sge/openhand_8_8.cur"), move;
height: 30px;
overflow: hidden;
position: absolute;
width: 30px;
}
.aU {
cursor: url("//ssl.gstatic.com/s2/oz/images/sge/closedhand_8_8.cur"), move;
position: absolute;
}
</style>
</head>
<body>
<div class="GO oY a-l-k">
<div class="HO Qya jia OO" style="width: 125px; height: 125px;">
<div class="lia"><div class="wy tV" style="left: 18px; top: 47px;">
<span class="Hs Bw">Друзья</span><div class="JO">0</div>
</div>
</div>
<div class="mia"></div>
</div>
<div class="y4 SS" style="display: none;"></div>
<div class="pY"></div>
<div class="iia"></div>
<canvas style="display:none" class="kia IS"></canvas>
</div>
<div class="GO oY a-l-k">
<div class="HO Qya jia OO" style="width: 125px; height: 125px;">
<div class="lia"><div class="wy tV" style="left: 18px; top: 47px;">
<span class="Hs Bw">Друзья</span><div class="JO">0</div>
</div>
</div>
<div class="mia"></div>
</div>
<div class="y4 SS" style="display: none;"></div>
<div class="pY"></div>
<div class="iia"></div>
<canvas style="display:none" class="kia IS"></canvas>
</div>
<div class="GO oY a-l-k">
<div class="HO Qya jia OO" style="width: 125px; height: 125px;">
<div class="lia"><div class="wy tV" style="left: 18px; top: 47px;">
<span class="Hs Bw">Друзья</span><div class="JO">0</div>
</div>
</div>
<div class="mia"></div>
</div>
<div class="y4 SS" style="display: none;"></div>
<div class="pY"></div>
<div class="iia"></div>
<canvas style="display:none" class="kia IS"></canvas>
</div>
</body>
</html>
