E-commerce sites are using ajax purchasing functionality. Have you noticed the flying to cart feature or auto dragging effect while buying any product online? ie. The product will start to move from the product display position to cart items position. You might have wondered by seeing the this animation. This effect, refereed as Fly to cart effect is created with JQuery and CSS.
Products are listed under a ul element with selector id products. You can position the cart block (with background green, see demo) anywhere in the page.
The css to style up the cart is:
The method of operation is very simple. While user clicks on the buy now button, the click event will be triggered. Jquery has introduced animate(), where we can provide the new position parameters of the element. Animate() will move the element from current position to specified position. The element must have a specified its position as absolute, otherwise this method wont work.
Here is the jquery code for this operation.
The whole html code is listed below. You can modify it and use it on your site.
Products are listed under a ul element with selector id products. You can position the cart block (with background green, see demo) anywhere in the page.
<ul id="products"> <li>Antique Royal chair<br /> price: 42000<br /> <button>buy now</button> </li> <li>Antique Spear<br /> price: 123000 <br /> <button>buy now</button> </li> <li>Antique Drawing<br /> price: 87500 <br /> <button>buy now</button> </li> </ul> <ul id="cart"> <li>King Sword<br/> price:712000 </li> </ul>
The css to style up the cart is:
#products li, #cart li {
width: 60px;
}
#cart li {
background: none repeat scroll 0 0 #008000;
color: # FFFFFF;
padding: 20px;
}
#cart {
float: right;
width: 200px;
list-style: none;
}
#cart button {
display: none;
}
#products li {
background: none repeat scroll 0 0# FFFFFF;
border: 1px solid# E5E5E5;
cursor: pointer;
display: inline;
float: left;
margin: 5px;
padding: 20px;
width: 20% ;
}
ul {
float: left;
list - style: none outside none;
width: 800px;
}
The method of operation is very simple. While user clicks on the buy now button, the click event will be triggered. Jquery has introduced animate(), where we can provide the new position parameters of the element. Animate() will move the element from current position to specified position. The element must have a specified its position as absolute, otherwise this method wont work.
Here is the jquery code for this operation.
$(document).ready(function(){
$('#products li button').one('click', function(){
$(this).parent().css({
position:'absolute',
top:$(this).offset().top,
left:$(this).offset().left
})
.animate({
top:$('#cart li:eq(0)').offset().top,
left:$('#cart li:eq(0)').offset().left
},
function(){
$(this).prependTo('#cart').css('position','static');
});
});
});
The whole html code is listed below. You can modify it and use it on your site.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Explorer</title>
<style type="text/css">
#products li, #cart li {
width: 60px;
}
#cart li {
background: none repeat scroll 0 0 #008000;
color: # FFFFFF;
padding: 20px;
}
#cart {
float: right;
width: 200px;
list-style: none;
}
#cart button {
display: none;
}
#products li {
background: none repeat scroll 0 0# FFFFFF;
border: 1px solid# E5E5E5;
cursor: pointer;
display: inline;
float: left;
margin: 5px;
padding: 20px;
width: 20% ;
}
ul {
float: left;
list - style: none outside none;
width: 800px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#products li button').one('click', function(){
$(this).parent().css({
position:'absolute',
top:$(this).offset().top,
left:$(this).offset().left
})
.animate({
top:$('#cart li:eq(0)').offset().top,
left:$('#cart li:eq(0)').offset().left
},
function(){
$(this).prependTo('#cart').css('position','static');
});
});
});
</script>
</head>
<body>
<ul id="products">
<li>Antique Royal chair<br />
price: 42000<br />
<button>buy now</button>
</li>
<li>Antique Spear<br />
price: 123000 <br />
<button>buy now</button>
</li>
<li>Antique Drawing<br />
price: 87500 <br />
<button>buy now</button>
</li>
</ul>
<ul id="cart">
<li>King Sword<br/>
price:712000
</li>
</ul>
</body>
</html>
0 comments:
Post a Comment