Эффект передвижения слайдов
Эффект перелистывания приобрел популярность в связи с распространением мобильных приложений. Некоторые библиотеки для мобильных приложений уже имеют встроенные функции для реализации такого эффекта с использованием прикосновения к сенсорному экрану. Однако такой эффект может быть интересен и на экранах настольных систем для смены различных слайдов с помощью курсора мыши. В данном уроке представлена идея для простой реализации эффекта перелистывания с помощью функций перетаскивания библиотеки jQuery UI. В основе лежит простая комбинация опции revert, анимации jQuery для перемещения элемента и события мыши для запуска процесса перелистывания страниц.
Разметка HTML
онтейнер для страниц должен иметь ширину равную или больше, чем общая ширина страниц содержания. Например, если у нас есть 3 пункта с шириной 300px, то контейнер должен иметь ширину минимум 900px.
CSS
В коде jQuery осуществляется подсчет страниц в контейнере для того, чтобы определить первую и последнюю страницу. Если попытаться перелистнуть крайние элементы, то ничего не получится.
jQuery
Процесс перелистывания запускается функцией bindMouseUp. В ней привязывается и отвязывается событие мыши, а также включается и отключается опция revert при перетаскивании объекта (страница вернется на свое место, если пользователь рано отпустит кнопку мыши).
Разметка HTML
Код
<div id="container">
<div id="swipe_container">
<div class="item">Страница №1</div>
<div class="item">Страница №2</div>
<div class="item">Страница №3</div>
<div class="item">Страница №4</div>
<div class="item">Страница №5</div>
<div style="clear:both"></div>
</div>
</div>
<div id="swipe_container">
<div class="item">Страница №1</div>
<div class="item">Страница №2</div>
<div class="item">Страница №3</div>
<div class="item">Страница №4</div>
<div class="item">Страница №5</div>
<div style="clear:both"></div>
</div>
</div>
онтейнер для страниц должен иметь ширину равную или больше, чем общая ширина страниц содержания. Например, если у нас есть 3 пункта с шириной 300px, то контейнер должен иметь ширину минимум 900px.
CSS
Код
#container {
width: 320px;
height: 480px;
overflow: hidden;
border: 5px solid #0099cc;
margin:0 auto;
}
#swipe_container {
width: 1600px;
background: #999;
}
.item {
font-size: 24px;
width: 320px;
height: 480px;
float: left;
background: #e3e3e3;
}
width: 320px;
height: 480px;
overflow: hidden;
border: 5px solid #0099cc;
margin:0 auto;
}
#swipe_container {
width: 1600px;
background: #999;
}
.item {
font-size: 24px;
width: 320px;
height: 480px;
float: left;
background: #e3e3e3;
}
В коде jQuery осуществляется подсчет страниц в контейнере для того, чтобы определить первую и последнюю страницу. Если попытаться перелистнуть крайние элементы, то ничего не получится.
jQuery
Код
$(document).ready(function() {
var cont_pos = $("#swipe_container").position();
var item_width = $(".item").width();
var items = $("#swipe_container > div.item").length;
var item_index = 1;
var cont_post_temp;
$("#swipe_container").draggable({ axis: "x", revert: true });
function bindMouseUp() {
$("#swipe_container").unbind('mouseup');
cont_post_temp = $("#swipe_container").position().left;
if (cont_pos.left > cont_post_temp && item_index != items) {
// Перелистывание вправо
$("#swipe_container").draggable("option", "revert", false);
var moveLeft = cont_pos.left - cont_post_temp;
moveLeft = Math.abs(item_width - moveLeft);
$("#swipe_container").animate({
left: '-=' + moveLeft
}, 500, function() {
$("#swipe_container").draggable("option", "revert", true);
cont_pos = $("#swipe_container").position();
$("#swipe_container").bind('mouseup', function() {
bindMouseUp();
});
});
item_index++;;
} else if (cont_pos.left < cont_post_temp && item_index != 1) {
// Перелистывание влево
$("#swipe_container").draggable("option", "revert", false);
var moveLeft = cont_post_temp - cont_pos.left;
moveLeft = Math.abs(item_width - moveLeft);
$("#swipe_container").animate({
left: '+=' + moveLeft
}, 500, function() {
$("#swipe_container").draggable("option", "revert", true);
cont_pos = $("#swipe_container").position();
$("#swipe_container").bind('mouseup', function() {
bindMouseUp();
});
});
item_index = item_index - 1;
} else {
// В начале или в конце перелистывания страницы
$("#swipe_container").draggable( "option", "revert", true );
$("#swipe_container").bind('mouseup', function() {
bindMouseUp();
});
}
}
$("#swipe_container").mouseup(function() {
bindMouseUp();
});
});
var cont_pos = $("#swipe_container").position();
var item_width = $(".item").width();
var items = $("#swipe_container > div.item").length;
var item_index = 1;
var cont_post_temp;
$("#swipe_container").draggable({ axis: "x", revert: true });
function bindMouseUp() {
$("#swipe_container").unbind('mouseup');
cont_post_temp = $("#swipe_container").position().left;
if (cont_pos.left > cont_post_temp && item_index != items) {
// Перелистывание вправо
$("#swipe_container").draggable("option", "revert", false);
var moveLeft = cont_pos.left - cont_post_temp;
moveLeft = Math.abs(item_width - moveLeft);
$("#swipe_container").animate({
left: '-=' + moveLeft
}, 500, function() {
$("#swipe_container").draggable("option", "revert", true);
cont_pos = $("#swipe_container").position();
$("#swipe_container").bind('mouseup', function() {
bindMouseUp();
});
});
item_index++;;
} else if (cont_pos.left < cont_post_temp && item_index != 1) {
// Перелистывание влево
$("#swipe_container").draggable("option", "revert", false);
var moveLeft = cont_post_temp - cont_pos.left;
moveLeft = Math.abs(item_width - moveLeft);
$("#swipe_container").animate({
left: '+=' + moveLeft
}, 500, function() {
$("#swipe_container").draggable("option", "revert", true);
cont_pos = $("#swipe_container").position();
$("#swipe_container").bind('mouseup', function() {
bindMouseUp();
});
});
item_index = item_index - 1;
} else {
// В начале или в конце перелистывания страницы
$("#swipe_container").draggable( "option", "revert", true );
$("#swipe_container").bind('mouseup', function() {
bindMouseUp();
});
}
}
$("#swipe_container").mouseup(function() {
bindMouseUp();
});
});
Процесс перелистывания запускается функцией bindMouseUp. В ней привязывается и отвязывается событие мыши, а также включается и отключается опция revert при перетаскивании объекта (страница вернется на свое место, если пользователь рано отпустит кнопку мыши).
0| Всего комментариев: 0 | |
 | Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |