Основное меню

Для того чтобы создать анимированный ротатор ссылок, для начала нам потребуется 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>

Как видите это обычный DIV-блок со списком ссылок. Для того чтобы эти ссылки начали анимировано вращаться, отредактируем выше приведенный код и получим следующее:

<div id="share">
<div id="stage">
<div class="main btn"><div class="bcontent"><a name="fb_share" type="box_count" href="http://google.com">google.com</a></div></div>
<div class="main btn"><div class="bcontent"><a name="fb_share" type="box_count" href="http://yandex.ru">yandex.ru</a></div></div>
<div class="main btn"><div class="bcontent"><a name="fb_share" type="box_count" href="http://mail.ru">mail.ru</a></div></div>
<div class="main btn"><div class="bcontent"><a name="fb_share" type="box_count" href="http://yahoo.com">yahoo.com</a></div></div>
<div class="main btn"><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-скрипт и сохраним его в файл script.js, код скрипта:

$(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;}
);
});

Подключаем наш скрипт к HTML-странице, прописывая в ней между тегами <head></head> следующий код:

<script type="text/javascript" src="script.js"></script>

И так наши ссылки начали вращаться, но выглядет это все как то не очень красиво, чтобы придать красоты данному действию, зададим стили используя следующее:

/* Основной код: */

#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(images/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(images/main_img.png) no-repeat -4px bottom;}

Теперь ссылки вращаются и вращаются красиво, на этом создание анимированного ротатора ссылок окончено.

Скачать файл
размер файла: 65,83 Kb
cкачиваний: 51

Раздел: Статьи для веб-мастера

Ordering where to buy muscle relaxants and study indications for this drugs taking


Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.