jQuery实现飞入购物车功能
要实现的效果:
思路:点击商品,图片就会飞入购物车,不但变小,而且加入到购物车后消失 了,不但如此,商品的图片还在,所以我们使用克隆的方法,加入到购物车后清除购物车即可,然后购物车+1
首先获取商品图片的位置及大小,并放到body上(否则飞入的时候看不到效果),然后获取购物车的方位,最后使用动画效果实现飞入效果。
注意:怎么找商品的图片,先找父元素,再从父元素下找图片的位置
前提准备:
html部分:
西秀ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
0
css部分:
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
a{
text-decoration:none;/*取消超链接的样式*/
}
.ditem{
width:220px;
height:352px;
border:solid 1px #ccc;
float:left;
margin:0px 5px;
font-size:14px;
margin-top:10px;
}
#dpros{
width:750px;
}
.dprice{
height:30px;
width:100%;
text-align:center;
color:#f00;
font-size:20px;
font-weight:900;
}
.dbtn a{
/*margin-top:10px;*/
width:150px;
height:36px;
background-color:#ff6a00;
display:block;
text-align:center;
line-height:36px;
color:#fff;
font-size:20px;
margin:10px auto;
border-radius:12px;
}
#dcar{
top:300px;
position:absolute;
right:0px;
width:72px;
height:63px;
background-image:url("../img/car.jpg");
}
#dprocount{
width:20px;
height:20px;
background-color:#f00;
color:#fff;
font-size:12px;
border-radius:100%;
text-align:center;
line-height:20px;
}
jQuery部分:重点
var iCount = 0; //购物车的变量,用来增加购物车的数量的临时变量
$(function(){
$(".dbtn").click(function(){ //点击“加入购物车”触发时事件
iCount++; //点击一次就+1
var addImg = $(this).parent().find(".dpic").find("img"); //找到该商品的图片
var cloneImg = addImg.clone(); //对该图片进行克隆
cloneImg.css({ //克隆的样式
"width": "250px",
"height": "250px",
"position":"absolute", //绝对定位
"left":addImg.offset().left, //该图片的left位置
"top":addImg.offset(),top, //该图片的top位置
"z-index":"200", //层级,越大越在上
"opacity":"0.5" //透明度 半透明
});
//克隆到body上的购物车位置
cloneImg.appendTo($("body")).animate({
"width":"50px", //克隆后的宽
"height":"50px", //克隆后的宽
"left":$("#dcar").offset().left, //克隆后的left位置 购物车
"top": $("#dcar").offset().top, //克隆后的left位置 购物车
},1000,function(){ //克隆后
$("#dprocount").html(iCount); //购物车上的数 +1
$(this).remove(); //清空购物车 不清除图片会叠加
});
});
});
下载链接:链接:https://pan.baidu.com/s/17VyaK8vAuBsrHPCDl5dFLw 密码:v820
文章题目:jQuery实现飞入购物车功能
URL网址:http://myzitong.com/article/ijsoej.html