Главная » Файлы » Прочие скрипты » jQuery

Навигация с эффектом скольжения при смене категорий на jQuery
24.06.14, 09:05:29

Скачать файл




Привет всем.
Сегодня мы возвращаемся к давно понравившемуся нам скрипту JQuery,
На сегодняшнем примере мы рассмотрим, меню с интересным эффектом скольжения при смене категории. Эффекты достигаются, применяя плагин jQuery Easing. И так приступим.

ДЕМО

В тело сайта, там где мы хотим видеть наш эффект, вставляем:
HTML-код
Код
<div class="container">  
<div id="container_wide">  
<div class="product_container" id="product_browser">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div class="product_container" id="product_apple">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div class="product_container" id="product_construction">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div class="product_container" id="product_cake">  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
<a href="#"><img src="Ссылка на ваш скриншот.png"></a>  
</div>  
<div style="clear:both"></div>  
</div>  
  </div>  
  <div class="nav">  
<a href="#" class="product_nav" id="nav_browser">Название категории</a>  
<a href="#" class="product_nav" id="nav_apple">Название категории</a>  
<a href="#" class="product_nav" id="nav_construction">Название категории</a>  
<a href="#" class="product_nav" id="nav_cake">Название категории</a>  
  </div>


Следующем шагом, в стилях прописываем код: CSS
Код
* {  
font-family: Arial, "Free Sans";  
  }  
  .container {  
border: 5px solid #0099cc;  
width: 700px;  
overflow: hidden;  
margin: 0 auto;  
margin-top: 50px;  
padding: 10px 0;  
-webkit-border-radius: .3em .3em 0 0;  
-moz-border-radius: .3em .3em 0 0;  
border-radius: .3em .3em 0 0;  
  }  
  #container_wide {  
width: 2800px;position: relative;  
  }  
  .product_container {  
text-align: center;  
width: 700px;  
float: left;  
position: relative;  
  }  
  .product_container a {  
margin: 0 12px;  
position: relative;  
  }  
  .nav {  
width: 700px;  
background: #0099cc;  
margin: 0 auto;  
text-align: center;  
border: 5px solid #0099cc;  
border-bottom-width: 10px;  
-webkit-border-radius: 0 0 .3em .3em;  
-moz-border-radius: 0 0 .3em .3em;  
border-radius: 0 0 .3em .3em;  
  }  
  .nav a {  
color: #fff;  
font-size: 12px;  
letter-spacing: 1px;  
margin-right: 10px;  
font-weight: bold;  
text-decoration: none;  
  }  
  .nav a:hover {  
color: #e3e3e3;  
  }


Далее сам код jQuery который прописываем в тегах между head и / head
Код
$(document).ready(function() {  
var displayed = "product_browser";  
var cindex = 0; // Текущий индекс (выводимый раздел)  

function loopMoveLeft(el, move) {  
if (el.length == 1) {  
setTimeout(function() {  
el.animate({ left: move }, {  
duration: 'slow',  
easing: 'easeOutBounce'  
});  
loopMoveLeft(el.next(), move);  
}, 100);  
}  
}  

function loopMoveRight(el, move) {  
if (el.length == 1) {  
setTimeout(function() {  
el.animate({ left: move }, {  
duration: 'slow',  
easing: 'easeOutBounce'  
});  
loopMoveRight(el.prev(), move);  
}, 100);  
}  
}  

function slideItem(obj_el) {  
var product = $(obj_el).attr("id").replace("nav_", "");  
var contid = 'product_' + product;  

// Текущий отображаемый элемент  
var elFirst = $("#"+displayed+" a:first-child");  
var elLast = $("#"+displayed+" a:last-child");  
var total_el = $("#"+displayed).children().length;  

var index = $(obj_el).index();  

// Новый элемент для вывода  
var el_f = $("#"+contid+" a:first-child");  
var el_l = $("#"+contid+" a:last-child");  
var total_new = $("#"+contid).children().length;  

var movement = -700 * index;  

if (cindex > index) {  
loopMoveRight(elLast, movement);
setTimeout(function() {  
loopMoveRight(el_l, movement)
}, (total_el + 1) * 100);  
} else if (cindex < index) {  
loopMoveLeft(elFirst, movement);
setTimeout(function() {  
loopMoveLeft(el_f, movement)  
}, (total_el + 1) * 100);  
}

cindex = index;  
displayed = contid;  

return (total_el + 5 + total_new) * 100;  
}  

var timeout;  

$(".product_nav").click(function() {  
$(".product_nav").unbind('click');  
timeout = slideItem(this);  

// Защита от дурака  
setTimeout(function() {  
$(".product_nav").bind('click', function() {  
timeout = slideItem(this);  
});  
}, timeout);  
});  
  });


Теперь чуток по подробней по установке.
Вначале скачайте подготовлены архив. С кодами jQuery
В верхней части сайта перед закрывающемся тегом / head
Вставляем оба кода jQuery.
Код
<script type="text/javascript" src="Ваша ссылка /jquery-1.6.min.js"></script>  
  <script type="text/javascript" src="Ваша ссылка /jquery.easing.1.3.js"></script>


Css вы также можете заархивировать и вставить перед закрывающемся тегом / head также таким образом
Код
<link type="text/css" href="Ваша ссылка "/>


Для задержки используется функция setTimeout. Также реализована защита от дурака, который будет бесцельно щелкать по разделам кнопкой мыши, в которой также используется setTimeout.
Вроде и вся установка всем удачи.

Материал подготовил: Bizon

Источник урока: http://superdit.com
Категория: jQuery | Добавил: Apocalypse | Теги: при, скольжения, на, JQuery, эффектом, категорий, смене, навигация
Просмотров: 354 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: