jQuery和CSS3添加到购物车特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148901788

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和CSS3添加到购物车特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}

.note {
background-color: #f8f4e5;
padding: 15px;
border-left: 4px solid #e67e22;
margin: 20px 0;
border-radius: 0 4px 4px 0;
}

.note a {
color: #e67e22;
text-decoration: none;
}

.note a:hover {
text-decoration: underline;
}

.products {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}

.product {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 280px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-image {
height: 200px;
overflow: hidden;
position: relative;
}

.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.product:hover .product-image img {
transform: scale(1.05);
}

.product-info {
padding: 15px;
}

.product-title {
font-size: 18px;
margin-bottom: 10px;
color: #333;
}

.product-price {
font-size: 22px;
font-weight: bold;
color: #e74c3c;
margin-bottom: 15px;
}

.add-to-cart {
display: block;
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
position: relative;
overflow: hidden;
}

.add-to-cart:hover {
background-color: #2980b9;
}

.add-to-cart:active {
transform: translateY(1px);
}

.cart-icon {
position: fixed;
top: 20px;
right: 20px;
background-color: #e74c3c;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 100;
}

.cart-count {
position: absolute;
top: -5px;
right: -5px;
background-color: #2ecc71;
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}

/* 动画效果 */
.fly-item {
position: fixed;
width: 20px;
height: 20px;
background-color: #e74c3c;
border-radius: 50%;
z-index: 99;
pointer-events: none;
animation: flyToCart 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes flyToCart {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
80% {
opacity: 0.8;
}
100% {
transform: translate(var(--endX), var(--endY)) scale(0.1);
opacity: 0;
}
}

.cart-bounce {
animation: cartBounce 0.5s ease;
}

@keyframes cartBounce {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
60% {
transform: scale(0.9);
}
}

.button-pop {
animation: buttonPop 0.4s ease;
}

@keyframes buttonPop {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
}
</style>
</head>
<body>
<div class="container">
<h1>商品列表 - 添加到购物车特效</h1>

<div class="products">
<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/280x200/3498db/ffffff?text=Product+1" alt="Product 1">
</div>
<div class="product-info">
<h3 class="product-title">优质T恤</h3>
<div class="product-price">¥99.00</div>
<button class="add-to-cart" data-id="1">加入购物车</button>
</div>
</div>

<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/280x200/e74c3c/ffffff?text=Product+2" alt="Product 2">
</div>
<div class="product-info">
<h3 class="product-title">时尚牛仔裤</h3>
<div class="product-price">¥199.00</div>
<button class="add-to-cart" data-id="2">加入购物车</button>
</div>
</div>

<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/280x200/2ecc71/ffffff?text=Product+3" alt="Product 3">
</div>
<div class="product-info">
<h3 class="product-title">休闲运动鞋</h3>
<div class="product-price">¥299.00</div>
<button class="add-to-cart" data-id="3">加入购物车</button>
</div>
</div>

<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/280x200/9b59b6/ffffff?text=Product+4" alt="Product 4">
</div>
<div class="product-info">
<h3 class="product-title">智能手表</h3>
<div class="product-price">¥599.00</div>
<button class="add-to-cart" data-id="4">加入购物车</button>
</div>
</div>
</div>
</div>

<div class="cart-icon">
🛒
<div class="cart-count">0</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let cartCount = 0;
const $cartIcon = $('.cart-icon');
const $cartCount = $('.cart-count');
const cartPosition = $cartIcon.offset();

// 添加到购物车按钮点击事件
$('.add-to-cart').on('click', function(e) {
e.preventDefault();

const $button = $(this);
const productId = $button.data('id');

// 按钮点击动画
$button.addClass('button-pop');
setTimeout(() => {
$button.removeClass('button-pop');
}, 400);

// 创建飞行元素
const buttonPosition = $button.offset();
const flyItem = $('<div class="fly-item"></div>');

// 计算飞行终点位置
const endX = cartPosition.left + 25 - buttonPosition.left - 10;
const endY = cartPosition.top + 25 - buttonPosition.top - 10;

// 设置飞行元素样式和动画
flyItem.css({
'left': buttonPosition.left + 10,
'top': buttonPosition.top + 10,
'--endX': endX + 'px',
'--endY': endY + 'px'
});

$('body').append(flyItem);

// 动画结束后移除飞行元素
setTimeout(() => {
flyItem.remove();

// 更新购物车数量
cartCount++;
$cartCount.text(cartCount);

// 购物车图标弹跳动画
$cartIcon.addClass('cart-bounce');
setTimeout(() => {
$cartIcon.removeClass('cart-bounce');
}, 500);

// 这里可以添加实际的添加到购物车逻辑
console.log(`产品ID ${productId} 已添加到购物车`);

}, 800);
});

// 购物车图标点击事件
$cartIcon.on('click', function() {
alert(`购物车中有 ${cartCount} 件商品`);
});
});
</script>
</body>
</html>