- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
//10 процентов от ширины блока
var blockPercent = ($(".prod").width() / 100) * 10;
//наведение мышью на блок
$('.prod').mouseenter(function(cursor){
//Добавление стиля для определения текущего блока
$(this).addClass('selected-prod');
var offset = $(this).offset();
//left-right
if (cursor.pageX - offset.left < blockPercent) {
$('.selected-prod .prod-description').css({'height': '100%','left':'0px'});
$('.selected-prod .prod-description').animate({'width': '100%'},200);
}
//right-left
if (cursor.pageX - offset.left > $(this).width() - blockPercent) {
$('.selected-prod .prod-description').css({'height': '100%', 'right':'0px'});
$('.selected-prod .prod-description').animate({'width': '100%'},200);
}
//top-down
if (cursor.pageY - offset.top < blockPercent) {
$('.selected-prod .prod-description').css({'width': '100%'});
$('.selected-prod .prod-description').animate({'height': '100%'},200);
}
//down-top
if (cursor.pageY - offset.top > $(this).height() - blockPercent) {
$('.selected-prod .prod-description').css({'width': '100%'});
$('.selected-prod .prod-description').animate({'height': '100%','bottom':'0px'},200);
}
});
Наткнулся на проекте. Первая мысль: "Оно слишком быстро работало!"
Комментарии (0) RSS
Добавить комментарий