当前位置：首页 > 网页特效 > 动画效果

jQuery和CSS3创意添加到购物车动画特效

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
该添加到购物车特效的HTML结构分为2部分：.cd-cart-trigger是添加到购物车按钮，.cd-cart是购物车的明细。

```html
<div class="cd-cart-container empty">
  <a href="#0" class="cd-cart-trigger">
    Cart
    <ul class="count"> 
      <li>0</li>
      <li>0</li>
    </ul> 
  </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>
          
        </ul>
      </div>
  
      <footer>
        <a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
      </footer>
    </div>
  </div> 
</div> 
```
div.body中的列表内容默认是空的，当某个商品被添加到购物车之后，通过JavaScript将其添加到列表中。

```html
<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元素上的.emptyclass会被移除，购物车被显示出来。

```html
.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来对宽度和高度进行动画。

```html
.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来为它们制作滑出动画效果。

```html
.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元素中。

```html
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()函数用于统计购物总数。在添加和移除商品时它们会被动态执行。

web299.com

jQuery和CSS3创意添加到购物车动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果