четверг, 17 мая 2012 г.

Jquery - эффект летящей картинки при добавлении в корзину товара

Для того, чтобы показать вашим покупателям где находится корзина можно сделать интересный эффект, при котором например кнопочка "добавить в корзину" улетает в корзину.

В данном случае эта кнопочка сделана в виде картинки

<input type="button" id="product64749" src="/images/cart.png" onclick="animate_cart_my(this);">

Для обработки нажатия на кнопку есть функция animate_cart_my

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

function animate_cart_my (obj)
{
src = obj.src;
    

$('<img src="'+src+'"
    id="temp_cart_animate"
    style="z-index: 2000;
    position: absolute;
    top:'+Math.ceil($(obj).offset().top)+'px;
    left:'+Math.ceil($(obj).offset().left)+'px;">
    ').prependTo('body');
   
    $('#temp_cart_animate').animate(
    {
        top: 150+$(window).scrollTop(),
        left: $('body').width()
    },
    700,
    function() {$('#temp_cart_animate').remove();});
}



А теперь распишу всё подробней
Math.ceil($(obj).offset().top)
и 
Math.ceil($(obj).offset().left)
тут мы получаем координаты нашей исходной картинки


$('вася').prependTo('body');
добавление слова вася после открытого тега body, в моей функции добавляется новая картинка и располагается поверх исходной


 $('#temp_cart_animate').animate(
    {
        top: 150+$(window).scrollTop(),
        left: $('body').width()
    },
    700,
    function() {$('#temp_cart_animate').remove();});




тут мы для вновь созданную картинку анимировано сдвигаем, сверху отступ будет 150 пикселей с учетом скрола страницы

слева отступ будет таким, чтобы картинка улетела за пределы страницы вправо, далее мы удаляем нашу картинку, чтобы не мешалась

11 комментариев:

Анонимный комментирует...

пример можно посмотреть?

Павел комментирует...

Да, http://martplus.ru

Анонимный комментирует...

как сделать что бы при клике на корзину товара, улетала не сама корзина(в корзину, парадокс),а изображение товара?

Павел комментирует...

В качестве obj передавать id картинки, $('#image234') например, если попробуете построчно вникнуть в мой код, то напишите аналогичное тоько по своему, описание всех строк есть в статье, если что то непонятно, то пишите

Анонимный комментирует...

получилось отправлять картинку, но она улетает от кнопки "в корзину", а не от изображения. еще не получается сделать что бы картинка летела в корзину.
показать не получается, вставка кода в сообщении не допустима, если можно могу на почту скинуть.

Павел комментирует...

Вышлите мне в архиве ваши наработки, я гляну что там у вас и подправлю

Анонимный комментирует...

Павел, архив выслал.

Павел комментирует...

Пофиксил и ответным письмом выслал

Анонимный комментирует...

Оличная идея... вот только уже вторые сутки рабираюсь куда и как это сделать.
Можете немоного подробней описать.
Жанна.

Анонимный комментирует...

можно мне на почту? egor.kish@bk.ru

Анонимный комментирует...

Очень интересный пример
сюда

Отправить комментарий