jquery加入购物车动画
时间: 2023-10-04 12:05:54 浏览: 45
可以使用jQuery的动画函数来实现加入购物车的动画效果,具体实现步骤如下:
1. 给“加入购物车”按钮添加点击事件,通过jQuery选择器获取到该按钮元素,并为其添加click事件处理函数。
```javascript
$('#add-to-cart-btn').click(function() {
// 动画效果代码
});
```
2. 获取到被添加到购物车的商品图片元素,通过jQuery选择器获取到该元素,并获取到该元素的位置信息。
```javascript
var productImg = $('#product-img');
var imgPosition = productImg.offset();
```
3. 在页面上添加一个新的图片元素,该元素的src属性值为被添加到购物车的商品图片的src属性值。
```javascript
var cartImg = $('<img src="' + productImg.attr('src') + '">');
```
4. 设置新的图片元素的样式,使其定位到被添加到购物车的商品图片的位置,并设置其宽度和高度。
```javascript
cartImg.css({
'position': 'absolute',
'top': imgPosition.top,
'left': imgPosition.left,
'width': productImg.width(),
'height': productImg.height()
});
```
5. 将新的图片元素添加到页面上,并使用jQuery的animate函数使其移动到购物车图标的位置,并在动画结束后将其从页面中移除。
```javascript
cartImg.appendTo('body').animate({
'top': cartIconPosition.top,
'left': cartIconPosition.left,
'width': 0,
'height': 0
}, 1000, function() {
$(this).remove();
});
```
完整代码如下:
```javascript
$('#add-to-cart-btn').click(function() {
var productImg = $('#product-img');
var imgPosition = productImg.offset();
var cartIcon = $('#cart-icon');
var cartIconPosition = cartIcon.offset();
var cartImg = $('<img src="' + productImg.attr('src') + '">');
cartImg.css({
'position': 'absolute',
'top': imgPosition.top,
'left': imgPosition.left,
'width': productImg.width(),
'height': productImg.height()
});
cartImg.appendTo('body').animate({
'top': cartIconPosition.top,
'left': cartIconPosition.left,
'width': 0,
'height': 0
}, 1000, function() {
$(this).remove();
});
});
```
上述代码实现了一个简单的加入购物车动画效果,可以根据需求进行修改和完善。