Здравствуйте! Создаю интернет магазин, видел на одном сайте как при нажатии на кнопку "положить в корзину" создавался эффект как товар улетал в корзину, в верхний правый угол. Очень удобная штука, пользователь сразу видит, что товар кладётся в корзину. Весь инет перерыл не могу найти готовое решение, может здесь дадите намётку?
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#basket{position:absolute;top:20px;right:30px;border:1px #000 solid;width:200px;height:200px}
#goods{position:absolute;top:600px;left:300px}
#goods div, #basket div{border:1px #000 solid;width:50px;height:50px;display:inline-block;cursor:pointer}
#goods div.el1, #basket div.el1{background:#f00}
#goods div.el2, #basket div.el2{background:#0f0}
#goods div.el3, #basket div.el3{background:#00f}
</style>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
</head>
<body>
<div id="basket">basket<br /></div>
<div id="goods">
<div class="el1">tovar1</div>
<div class="el2">tovar2</div>
<div class="el3">tovar3</div>
</div>
<script type="text/javascript">
$(function(){
$('#goods div').live('click', function(){
var t = $(this), e = t.clone(), b = $('#basket'), o = t.position(), po = t.parent().offset(), bo = b.offset();
e.css({top: o.top+'px', left: o.left+'px', position: 'absolute'});
t.parent().append(e);
e.animate({top: -po.top+bo.top+(b.height()-t.height())/2, left: -po.left+bo.left+(b.width()-t.width())/2}, 500, function(){
$(this).css({left: 0, top: 0, position: 'static'}).appendTo(b);
});
});
});
</script>
</body>
</html>
Можно и короче, но общий смысл понятен. Используется jQuery.