购物车添加动态数字变化效果
代码语言:html
所属分类:电商
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { jQuery(document).ready(function($){ var cartWrapper = $('.cd-cart-container'); //product id - you don't need a counter in your real project but you can use your real product id var productId = 0; if( cartWrapper.length > 0 ) { //store jQuery objects var cartBody = cartWrapper.find('.body') var cartList = cartBody.find('ul').eq(0); var cartTotal = cartWrapper.find('.checkout').find('span'); var cartTrigger = cartWrapper.children('.cd-cart-trigger'); var cartCount = cartTrigger.children('.count') var addToCartBtn = $('.cd-add-to-cart'); var undo = cartWrapper.find('.undo'); var undoTimeoutId; //add product to cart addToCartBtn.on('click', function(event){ event.preventDefault(); addToCart($(this)); }); //open/close cart cartTrigger.on('click', function(event){ event.preventDefault(); toggleCart(); }); //close cart when clicking on the .cd-cart-container::before (bg layer) cartWrapper.on('click', function(event){ if( $(event.target).is($(this)) ) toggleCart(true); }); //delete an item from the cart cartList.on('click', '.delete-item', function(event){ event.preventDefault(); removeProduct($(event.target).parents('.product')); }); //update item quantity cartList.on('change', 'select', function(event){ quickUpdateCart(); }); //reinsert item deleted from the cart undo.on('click', 'a', function(event){ clearInterval(undoTimeoutId); event.preventDefault(); cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ $(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style'); quickUpdateCart(); }); undo.removeClass('visible'); }); } function toggleCart(bool) { var cartIsOpen = ( typeof bool === 'undefined' ) ? cartWrapper.hasClass('cart-open') : bool; if( cartIsOpen ) { cartWrapper.removeClass('cart-open'); //reset undo clearInterval(undoTimeoutId); undo.removeClass('visible'); cartList.find('.deleted').remove(); setTimeout(function(){ cartBody.scrollTop(0); //check if cart empty to hide it if( Number(cartCount.find('li').eq(0).text()) == 0) cartWrapper.addClass('empty'); }, 500); } else { cartWrapper.addClass('cart-open'); } } function addToCart(trigger) { var cartIsEmpty = cartWrapper.hasClass('empty'); //update cart product list addProduct(); //update number of items updateCartCount(cartIsEmpty); //update total price updateCartTotal(trigger.data('price'), true); //show cart cartWrapper.removeClass('empty'); } function addProduct() { //this is just a product placeholder //you should insert an item with the selected product info //replace productId, productName, price and url with your real product info productId = productId + 1; var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="http://repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>'); cartList.prepend(productAdded); } function removeProduct(product) { clearInterval(undoTimeoutId); cartList.find('.deleted').remove(); var topPosition = product.offset().top - cartBody.children('ul').offset().top , productQuantity = Number(product.find('.quantity').find('select').val()), productTotPrice = Number(product.find('.price').text().replace('$', '')) * productQuantity; product.css('top', topPosition+'px').addClass('deleted'); //update items count + total price updateCartTotal(productTotPrice, false); updateCartCount(true, -productQuantity); undo.addClass('visible'); //wait 8sec before completely remove the item undoTimeoutId = setTimeout(function(){ undo.removeClass('visible'); cartList.find('.deleted').remove(); }, 8000); } function quickUpdateCart() { var quantity = 0; var price = 0; cartList.children('li:not(.deleted)').each(function(){ var singleQuantity = Number($(this).find('select').val()); quantity = quantity + singleQuantity; price = price + singleQuantity*Number($(this).find('.price').text().replace('$', '')); }); cartTotal.text(price.toFixed(2)); cartCount.find('li').eq(0).text(quantity); cartCount.find('li').eq(1).text(quantity+1); } function updateCartCount(emptyCart, quantity) { if( typeof quantity === 'undefined' ) { var actual = Number(cartCount.find('li').eq(0).text()) + 1; var next = actual + 1; if( emptyCart ) { cartCount.find('li').eq(0).text(actual); cartCount.find('li').eq(1).text(next); } else { cartCount.addClass('update-count'); setTimeout(function() { cartCount.find('li').eq(0).text(actual); }, 150); setTimeout(function() { cartCount.removeClass('update-count'); }, 200); setTimeout(function() { cartCount.find('li').eq(1).text(next); }, 230); } } else { var actual = Number(cartCount.find('li').eq(0).text()) + quantity; var next = actual + 1; cartCount.find('li').eq(0).text(actual); cartCount.find('li').eq(1).text(next); } } function updateCartTotal(price, bool) { bool ? cartTotal.text( (Number(cartTotal.text()) + price).toFixed(2) ) : cartTotal.text( (Number(cartTotal.text()) - price).toFixed(2) ); } }); }); </script> <style> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 1.6rem; font-family: "Source Sans Pro", sans-serif; color: #2b3e51; background-color: #ecf0f1; } a { color: #2c97de; text-decoration: none; } img { max-width: 100%; } main { text-align: center; padding: 2em 5%; } h1 { font-size: 2rem; padding: 3em 0 .8em; } @media only screen and (min-width: 768px) { h1 { font-size: 3.2rem; } } .cd-add-to-cart { display: inline-block; padding: 1.2em 1.8em; background: #2c97de; border-radius: 50em; text-transform: uppercase; color: #ffffff; font-weight: 700; letter-spacing: .1em; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); -webkit-transition: all .2s; transition: all .2s; } .cd-add-to-cart:hover { background: #42a2e1; } .cd-add-to-cart:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } /* -------------------------------- Main Components -------------------------------- */ .cd-cart-container::before { /* dark bg layer visible when the cart is open */ content: ''; position: fixed; z-index: 1; height: 100vh; width: 100vw; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .cd-cart-container.cart-open::before { opacity: 1; visibility: visible; } .cd-cart-trigger, .cd-cart { position: fixed; bottom: 20px; right: 5%; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: transform; backface-visibility: hidden; } .empty .cd-cart-trigger, .empty .cd-cart { /* hide cart */ -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); } @media only screen and (min-width: 1170px) { .cd-cart-trigger, .cd-cart { bottom: 40px; } } .cd-cart-trigger { /* button that triggers the cart content */ z-index: 3; height: 72px; width: 72px; /* replace text with image */ text-indent: 100%; color: transparent; white-space: nowrap; } .cd-cart-trigger::after, .cd-cart-trigger::before { /* used to create the cart/'X' icon */ content: ''; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 100%; width: 100%; background: url(http://repo.bfw.wiki/bfwrepo/icon/5e0fe3ff1dd0a.png) no-repeat center center; -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s, -webkit-transform .2s; } .cd-cart-trigger::after { /* 'X' icon */ background-position: -72px 0; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg); transform: translateX(-50%) translateY(-50%) rotate(90deg); } .cart-open .cd-cart-trigger::before { opacity: 0; } .cart-open .cd-cart-trigger::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .cd-cart-trigger .count { /* number of items indicator */ position: absolute; top: -10px; right: -10px; height: 28px; width: 28px; background: #e94b35; color: #ffffff; font-size: 1.5rem; font-weight: bold; border-radius: 50%; text-indent: 0; -webkit-transition: -webkit-transform .2s .5s; transition: -webkit-transform .2s .5s; transition: transform .2s .5s; transition: transform .2s .5s, -webkit-transform .2s .5s; } .cd-cart-trigger .count li { /* this is the number of items in the cart */ position: absolute; -webkit-transform: translateZ(0); transform: translateZ(0); left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .cd-cart-trigger .count li:last-of-type { visibility: hidden; } .cd-cart-trigger .count.update-count li:last-of-type { -webkit-animation: cd-qty-enter .15s; animation: cd-qty-enter .15s; -webkit-animation-direction: forwards; animation-direction: forwards; } .cd-cart-trigger .count.update-count li:first-of-type { -webkit-animation: cd-qty-leave .15s; animation: cd-qty-leave .15s; -webkit-animation-direction: forwards; animation-direction: forwards; } .cart-open .cd-cart-trigger .count { -webkit-transition: -webkit-transform .2s 0s; transition: -webkit-transform .2s 0s; transition: transform .2s 0s; transition: transform .2s 0s, -webkit-transform .2s 0s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .empty .cd-cart-trigger .count { /* fix bug - when cart is empty, do not animat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0