Понедельник, 08 Октября 2012 12:50

Функция animate() на чистом JavaScript

Written by 
Оцени эту запись
(3 Голоса)

Многие знают замечательную функцию animate() в jQuery, при помощи которой лежно легко реализовывать анимацию на странице. Ее вид такой:

 

$('#elem').animate({

параметр1 : значение1,

параметр2 : значение2

}, duration);

 

Но бывают ситуации, когда нужно реализовать подобный анимированный эффект на чистом JavaScript, без использования библиотеки jQuery. В этой статье я на конкретном примере расскажу как сделать анимированный эффект на JavaScript.

 

 

Сделаем простор слайдер. Каждый слайд - это блок с текстом, который, конечно можно заменить на картинку или какой-либо другой функционал. Также нам нужны кнопочки перемотки вперед и назад.

 

 

Демо

 

 

Делаем нужную структуру документа:

 

 

<div class="wrapper" id="wrapper">
<span class="prev" id="prev"><</span>
<span class="next" id="next">></span>
<div class="animate_holder" id="holder">
<div class="animate_inner" id="inner">
<div class="animate_item">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
 
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions 
 
of Lorem Ipsum.
</div>
<div class="animate_item">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
 
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions 
 
of Lorem Ipsum.
</div>
<div class="animate_item">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
 
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions 
 
of Lorem Ipsum.
</div>
<div class="animate_item">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
 
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
 
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
 
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions 
 
of Lorem Ipsum.
</div>
</div>
</div>
</div>

 

 

Здесь такая логика:

Есть основной контейнер с id="wrapper". Внутри него лежат стрелки туда/сюда и контейнер со слайдами id="holder">. Внутри контейнера со слайдами лежит блок id="inner". Основной контейнер имеет свойство position: relative, чтобы все позиционировались относительно него. Блок inner растягивается на всю ширину всех слайдов и имеет свойство position: absolute. При клике на туда/сюда мы быдем слещать влево/вправо именно его. В сами слайды плавайщие - float: left. Также важное свойство есть у блока animate_holder - overflow:hidden. это нужно для того, чтобы части inner, вылезающие за его приделы, не были видны.

 

 

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

 
.wrapper {
width: 600px;
height: 300px;
margin: 20px auto;
}
.animate_holder {
width: 600px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 10;
}
.prev, .next {
display: block;
position: absolute;
z-index: 12;
top: 120px;
left: -15px;
width: 30px;
height: 30px;
}
.next {
right: -15px;
left: auto;
}
.animate_inner {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 1800px;
}
.animate_item {
width: 500px;
height: 260px;
float:left;
padding: 20px 50px;
}
 
 
Более подробно стили можно будет посмотреть в демо.
 
А теперь рассмотрим подробно JavaScript  код, который и является основной частью этой статьи.
 
 
На элемент <body> вешаем функцию Animate().
 
 
<body onLoad="Animate();"></body>
 
А в <head> документа добавляем сам скрипт. Его можно вынести в отдельный файл, но я не хотела создавать отдельные js и css.
 
 
<script type="text/javascript">
function Animate(){
 
var holder, prev, next, inner, left, inner_width, item_width, scroll;
holder = document.getElementById('holder');
prev = document.getElementById('prev');
next = document.getElementById('next');
inner = document.getElementById('inner');
inner.style.left = '0px';
left = parseInt(inner.style.left, 10);
item_width = 600;
inner_width = inner.getElementsByTagName('div').length * item_width;
next.addEventListener('click', function () {
if (-left < inner_width-2*item_width) {
scroll = item_width;
setInterval(function(){
if (left > (left-scroll)) {
left--;
scroll--;
inner.style.left = left+'px';
}
},1)
}
});
prev.addEventListener('click', function () {
if (1200 >= -left && -left> 0) {
scroll = -item_width;
setInterval(function(){
if (-left > (scroll-left)) {
left++;
scroll++;
inner.style.left = left+'px';
}
},1)
}
});
}
</script>
 
 
Вначале мы вводим переменные и определяем элементы, которые будут отвечать за наши основные части:
 
 
holder = document.getElementById('holder');
prev = document.getElementById('prev');
next = document.getElementById('next');
inner = document.getElementById('inner');
 
 
Определяем переменную left - сдвиг блока inner относительно родительского. А также задаем ширину слайда и ширину контейнера слайдов inner:
 
 
left = parseInt(inner.style.left, 10);
item_width = 600;
inner_width = inner.getElementsByTagName('div').length * item_width;
 
 
Далее вешаем обработчики на кнопки prev и next. 
 
 
next.addEventListener('click', function () {
if (-left < inner_width-2*item_width) {
scroll = item_width;
setInterval(function(){
if (left > (left-scroll)) {
left--;
scroll--;
inner.style.left = left+'px';
}
},1)
}
 
 
Рассмотрим клик на кнопку next, то есть следующий слайд. Предыдущий будет сделан аналогично.
 
Здесь мы проверяем условие на доступность сдвигу, то есть следующий блок будет показан, только при его наличии:
 
 
if (-left < inner_width-2*item_width) {}
 
 
где item_width - ширина слайда, а inner_width - ширина держателя всех слайдов.
 
 
Задаем вспомагательную переменную 
 
 
scroll = item_width;
 
 
И подключаем функцию setInterval с delay равным 1 миллисекунду.
 
Каждую миллисекунду мы меняем значение left на 1px. Общее количество пикселей, на которое мы смещаем left равно item_width.
 
 
 

Комментарии  

 
0 #1 Прогон сайтов дешево 29.10.2015 13:46
Отличный сайт! И очень полезная информация!
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов