<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Ajax Shopping Cart: Created By Zeeshan Rasool on http://www.99points.info -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Shopping Cart : Super Shopping Cart With JQuery and PHP </title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.livequery.js"></script>
<link href="css.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
var Arrays=new Array();
$('.add-to-cart-button').click(function(){
var thisID = $(this).parent().parent().attr('id').replace('detail-','');
var itemname = $(this).parent().find('.item_name').html();
var itemprice = $(this).parent().find('.price').html();
if(include(Arrays,thisID))
{
var price = $('#each-'+thisID).children(".shopp-price").find('em').html();
var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
quantity = parseInt(quantity)+parseInt(1);
var total = parseInt(itemprice)*parseInt(quantity);
$('#each-'+thisID).children(".shopp-price").find('em').html(total);
$('#each-'+thisID).children(".shopp-quantity").html(quantity);
var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)-parseInt(price);
prev_charges = parseInt(prev_charges)+parseInt(total);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
}
else
{
Arrays.push(thisID);
var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)+parseInt(itemprice);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
var Height = $('#cart_wrapper').height();
$('#cart_wrapper').css({height:Height+parseInt(45)});
$('#cart_wrapper .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');
}
});
$('.remove').livequery('click', function() {
var deduct = $(this).parent().children(".shopp-price").find('em').html();
var prev_charges = $('.cart-total span').html();
var thisID = $(this).parent().attr('id').replace('each-','');
var pos = getpos(Arrays,thisID);
Arrays.splice(pos,1,"0")
prev_charges = parseInt(prev_charges)-parseInt(deduct);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
$(this).parent().remove();
});
$('#Submit').livequery('click', function() {
var totalCharge = $('#total-hidden-charges').val();
$('#cart_wrapper').html('Total Charges: $'+totalCharge);
return false;
});
// this is for 2nd row's li offset from top. It means how much offset you want to give them with animation
var single_li_offset = 200;
var current_opened_box = -1;
$('#wrap li').click(function() {
var thisID = $(this).attr('id');
var $this = $(this);
var id = $('#wrap li').index($this);
if(current_opened_box == id) // if user click a opened box li again you close the box and return back
{
$('#wrap .detail-view').slideUp('slow');
return false;
}
$('#cart_wrapper').slideUp('slow');
$('#wrap .detail-view').slideUp('slow');
// save this id. so if user click a opened box li again you close the box.
current_opened_box = id;
var targetOffset = 0;
// below conditions assumes that there are four li in one row and total rows are 4. How ever if you want to increase the rows you have to increase else-if conditions and if you want to increase li in one row, then you have to increment all value below. (if(id<=3)), if(id<=7) etc
if(id<=3)
targetOffset = 0;
else if(id<=7)
targetOffset = single_li_offset;
else if(id<=11)
targetOffset = single_li_offset*2;
else if(id<=15)
targetOffset = single_li_offset*3;
$("html:not(:animated),body:not(:animated)").animate({scrollTop: targetOffset}, 800,function(){
$('#wrap #detail-'+thisID).slideDown(500);
return false;
});
});
$('.close a').click(function() {
$('#wrap .detail-view').slideUp('slow');
});
$('.closeCart').click(function() {
$('#cart_wrapper').slideUp();
});
$('#show_cart').click(function() {
$('#cart_wrapper').slideToggle('slow');
});
});
function include(arr, obj) {
for(var i=0; i<arr.length; i++) {
if (arr[i] == obj) return true;
}
}
function getpos(arr, obj) {
for(var i=0; i<arr.length; i++) {
if (arr[i] == obj) return i;
}
}
</script>
</head>
<body>
<div style="width:960px; margin:0px auto;">
<div style="height:30px; line-height:30px;width:960px;">
<div style="float:left">技术支持：<a href="http://www.whkge.com/forum.php?mod=forumdisplay&fid=67">Js效果列表</a> <a href="http://www.icoioo.com">南京爱搜</a></div>
<div style="float:right">社区联盟：<a href="http://www.toodii.com">昆明社区</a> <a href="http://www.whkge.com">武汉k歌网</a> <a style=" color:#900; text-decoration:none; font-weight:600" href="http://www.whkge.com/portal.php?mod=topic&topicid=1">我要加入联盟</a></div>
</div>
<div style="width:960px; height:90px; text-align:left">
<script type="text/javascript"><!--
google_ad_client = "pub-1678334037855176";
/* 728x90, 08-2-28 */
google_ad_slot = "4523092392";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div style="clear:both"></div>
<div align="left" style="min-height:800px;">
<div id="cart_wrapper" align="center">
<form action="#" id="cart_form" name="cart_form">
<div class="cart-info"></div>
<div class="cart-total">
<b>Total Charges: </b> $<span>0</span>
<input type="hidden" name="total-hidden-charges" id="total-hidden-charges" value="0" />
</div>
<button type="submit" id="Submit">CheckOut</button>
</form>
</div>
<div id="wrap" align="center">
<a id="show_cart" href="javascript:void(0)">View Cart</a>
<ul>
<li id="1">
<img src="product_img/1.jpg" class="items" height="100" alt="" />
<br clear="all" />
<div>Red Grocery Bag</div>
</li>
<li id="2">
<img src="product_img/2.jpg" class="items" height="100" alt="" />
<br clear="all" />
<div>Reusable Grocery Bag</div>
</li>
<li id="3">
<img src="product_img/3.jpg" class="items" height="100" alt="" />
<br clear="all" />
<div>White Grocery Bag</div>
</li>
<li id="4">
<img src="product_img/4.jpg" class="items" height="100" alt="" />
<br clear="all" />
<div>Yellow Grocery Bag</div>
</li>
<!-- Detail Boxes for above four li -->
<div class="detail-view" id="detail-1">
<div class="close" align="right">
<a href="javascript:void(0)">x</a>
</div>
<img src="product_img/1.jpg" class="detail_images" width="340" height="310" alt="" />
<div class="detail_info">
<label class='item_name'>Red Grocery Bag</label>
<br clear="all" />
<p>
shopping bag, shopping, bag, merchandise, consumerism, gift:
<br clear="all" /><br clear="all" />
$<span class="price">80.00</span>
</p>
<br clear="all" />
<button class="add-to-
仿淘宝商品列表js展示效果 jquery效果 ajax效果
5星 · 超过95%的资源 需积分: 49 65 浏览量
2012-01-12
22:38:17
上传
评论 4
收藏 601KB ZIP 举报 
super_ajax_cart.zip （23个子文件） 
css.css 4KB
index.html 21KB
bg.jpg 4KB jquery-1.3.2.js 122KB jquery.livequery.js 7KB
product_img 2.jpg 13KB 11.jpg 14KB 13.jpg 40KB 8.jpg 26KB 6.jpg 75KB 1.jpg 26KB 16.jpg 42KB 12.jpg 28KB 14.jpg 46KB 4.jpg 45KB 5.jpg 33KB 9.jpg 47KB Thumbs.db 64KB 10.jpg 46KB 7.jpg 14KB 15.jpg 47KB 3.jpg 14KB
remove.png 213B
- 1
- 2
前往页