这是一款使用jQuery和CSS3制作的创意添加到购物车动画特效。该特效在用户点击“添加到购物车”按钮时,在屏幕右下角显示一个购物车图标级购物数量。当用户点击该购物车图标后,会展示出用户购物的明细。
使用方法
HTML结构
该添加到购物车特效的HTML结构分为2部分:.cd-cart-trigger
是添加到购物车按钮,.cd-cart
是购物车的明细。
<div class="cd-cart-container empty"> <a href="#0" class="cd-cart-trigger"> Cart <ul class="count"> <!-- cart items count --> <li>0</li> <li>0</li> </ul> <!-- .count --> </a> <div class="cd-cart"> <div class="wrapper"> <header> <h2>Cart</h2> <span class="undo">Item removed. <a href="#0">Undo</a></span> </header> <div class="body"> <ul> <!-- products added to the cart will be inserted here using JavaScript --> </ul> </div> <footer> <a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a> </footer> </div> </div> <!-- .cd-cart --> </div> <!-- cd-cart-container -->
div.body
中的列表内容默认是空的,当某个商品被添加到购物车之后,通过JavaScript将其添加到列表中。
<div class="body"> <ul> <li class="product"> <div class="product-image"> <a href="#0"><img src="img/thumb.jpg" 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> <!-- ... --> </select> </span> </div> </div> </div> </li> <!-- 添加到购物车的其它内容 --> </ul> </div>
CSS样式
.cd-cart
和.cd-cart-trigger
元素的定位方式使用固定定位,默认被移动到视口之外。当某个商品被添加到购物车之后,.cd-cart-container
元素上的.empty
class会被移除,购物车被显示出来。
.cd-cart-trigger, .cd-cart { position: fixed; bottom: 20px; right: 5%; transition: transform .2s; } .empty .cd-cart-trigger, .empty .cd-cart { /* 隐藏购物车*/ transform: translateY(150px); }
在制作购物车动画的时候,div.wrapper
元素被设置了固定的宽度和高度,它的尺寸和a.cd-cart-trigger
尺寸相同。当购物车打开的时候,使用.cart-open
class来对宽度和高度进行动画。
.cd-cart .wrapper { position: absolute; bottom: 0; right: 0; z-index: 2; overflow: hidden; height: 72px; width: 72px; border-radius: 6px; transition: height .4s .1s, width .4s .1s, box-shadow .3s; transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95); background: #ffffff; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17); } .cart-open .cd-cart .wrapper { height: 100%; width: 100%; transition-delay: 0s; }
.deleted
class用于从购物车中移除商品。被移除的商品使用绝对定位,并使用cd-item-slide-out
class来为它们制作滑出动画效果。
.cd-cart .body li.deleted { /* this class is added to an item when it is removed form the cart */ position: absolute; left: 1.4em; width: calc(100% - 2.8em); opacity: 0; animation: cd-item-slide-out .3s forwards; } @keyframes cd-item-slide-out { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
如果用户点击了“Undo”按钮,.deleted
class类会被移除,商品会被重新传入到列表中。
JAVASCRIPT
当用户点击了“添加到购物车”按钮,在Js代码中通过addProduct()
方法将一个新的商品添加到.body > ul
元素中。
function addProduct() { //this is just a product placeholder var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" 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); }
另外,updateCartCount()
函数用于更新购物车的购物数量。updateCartTotal()
函数用于统计购物总数。在添加和移除商品时它们会被动态执行。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!