Автор:Alexis.Kudy
И так, чтобы получить такой вариант ротатора, как показан выше, нам необходимо начать с самого начала, поэтому создаем HTML каркас:
<div>
<div>
<div><div><a href="http://google.com">google.com</a></div></div>
<div><div><a href="http://yandex.ru">yandex.ru</a></div></div>
<div><div><a href="http://mail.ru">mail.ru</a></div></div>
<div><div><a href="http://yahoo.com">yahoo.com</a></div></div>
<div><div><a href="http://nigma.ru">nigma.ru</a></div></div>
</div>
<div></div>
</div>
После просмотра данного кода, вы увидите обычный ссылочный список, для того, что бы данные ссылки ожили и начали вращаться, мы немного изменим выше написанный
HTML код:
<div id="share">
<div id="stage">
<div class="btn main"><div class="bcontent"><a name="fb_share" type="box_count" href="http://google.com">google.com</a></div></div>
<div class="btn main"><div class="bcontent"><a name="fb_share" type="box_count" href="http://yandex.ru">yandex.ru</a></div></div>
<div class="btn main"><div class="bcontent"><a name="fb_share" type="box_count" href="http://mail.ru">mail.ru</a></div></div>
<div class="btn main"><div class="bcontent"><a name="fb_share" type="box_count" href="http://yahoo.com">yahoo.com</a></div></div>
<div class="btn main"><div class="bcontent"><a name="fb_share" type="box_count" href="http://nigma.ru">nigma.ru</a></div></div>
</div>
<div id="share-label"></div>
</div>
После этого, также не каких изменений не происходит, почему? Да потому, что мы не подключили jQuery и не написали соответствующий скрипт, для того чтобы наши ссылки ожили. Вот собственно и код самого скрипта:
$(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');
/* Storing the length of the array in a viriable: */
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 interva is run 25 times a second */
setInterval(function(){
/* This forms an area with no activity in the middle of the stage */
if(Math.abs(dif)<0.5) return false;
/* Increment the degrees: */
deg+=dif;
/* Loop through all the buttons: */
$.each(arr,function(i){
/* Calculate the sine and cosine */
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 on 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 stops 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;}
);
});
Замечание: не забудьте подключить библиотеку jQuery, иначе ничего работать не будет.
И так, теперь, при просмотре работы в браузере, вы заметите, что ссылки начали вращаться, но как-то не очень красиво, поэтому пропишем некоторые
CSS стили, для придания нашему ротатору большей юзабильности:
/* Основной код: */
#share{
/* Основной, внешний блок */
width:500px;
background:#ececec;
height:220px;
margin:60px auto;
overflow:hidden;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#share-label{
/* Изображение справа */
background:url(img/share.png) no-repeat 50% 50%;
float:left;
height:220px;
width:200px;
}
#stage{
/* Блок с онимированными элементами */
position:relative;
border-right:1px solid #DDDDDD;
width:290px;
height:220px;
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{
/* Данный класс назначается каждой кнопке ротатора */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}
.bcontent{
/* Позоционирование .btn внутри блока */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
/* Отражение под надписью */
.main{ background:url(img/main_img.png) no-repeat -4px bottom;}
Если нет желания, создавать всё с нуля, предоставляю вашему вниманию готовый исходник:
rotator.rar [30.58 Kb] (cкачиваний: 217)
MD5: 80aabe1be0558fe7a2f2a9f027d6aaea