添加商品到购物车动画
2017-09-05 本文已影响0人
我怎么可能不是我
添加商品到购物车的动画，网上很多是用的抛物线的思想来做，这是一种很好的思想，网上也有很多的demo和介绍，这里我介绍另一种方法，一种直线运动，实现起来很方便的方法。
主要思路
1，当点击‘加入购物车’的时候获取被点击按钮的‘坐标1’；
2，在当前坐标位置创建动画节点，；
3，获取目标节点（购物车位置）‘坐标2’；
4，使用jQuery的animate函数，把动画加点从‘坐标1’想‘坐标2’移动
这样做是直线运动，是不是so easy,话不多说，上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" href="css/index.css">
<title>购物车添加动画</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--页面样式-->
<style>
*{margin: 0;padding: 0;}
ul{list-style:none}
.body{width: 80%;height: 100vh;background-color:rgba(23,23,23,0.1);margin:0 auto;}
.car{width: 80%;height: 40vh;background-color:grey;margin:0 auto;display:
flex;justify-content: flex-end}
.goods{width: 80%;height: 60vh;background-color:white;margin:0 auto;}
.car>p{display: flex;width: 80px;height: 80px;border-radius: 40px;background-color:
yellowgreen;justify-content: center; flex-direction:column;}
.car>p>span{margin: auto}
.goodsul{display: flex;flex-wrap: wrap}
.goodsul>li{width: 100px;height: 200px;border:grey solid 1px;display: flex;justify-content:
center;flex-direction: column;margin:10px}
.goodsul>li>a{margin:auto;text-decoration: none;display: block;width: 90%;height: 32px;line-height:
32px;background-color: green;color: white;text-align: center}
</style>
</head>
<body>
<!--文档结构-->
<div class="body">
<div class="car"><p class="shopcar"><span>购物车</span></p></div>
<div class="goods">
<ul class="goodsul">
<li class="goodsul"><a class="goodson" href="javascript:" >加入购物车</a></li>
<li class="goodsul"><a class="goodson" href="javascript:" >加入购物车</a></li>
<li class="goodsul"><a class="goodson" href="javascript:" >加入购物车</a></li>
<li class="goodsul"><a class="goodson" href="javascript:" >加入购物车</a></li>
<li class="goodsul"><a class="goodson" href="javascript:" >加入购物车</a></li>
<li class="goodsul"><a class="goodson" href="javascript:" >加入购物车</a></li>
</ul>
</div>
</div>
<script>
//创建动画主体节点
function createplane(orL,orT) {
var createele = document.createElement('div');
createele.setAttribute("class","goodsone");
createele.style.position = 'absolute';
createele.style.width = '50px';
createele.style.height = '50px';
createele.style.backgroundColor = 'red';
createele.style.left = orL+'px';
createele.style.top = orT+'px';
createele.style.borderRadius = '25px';
document.body.appendChild(createele);
}
// 点击事件
$(".goodson").click(function () {
// 获取源位置（加入购物车按钮）坐标
var orL = $(this).offset().left;
var orT = $(this).offset().top;
// 获取目标（购物车）坐标
var obL = $(".shopcar").offset().left;
var obT = $('.shopcar').offset().top;
createplane(orL,orT);
$(".goodsone").animate({"left":obL+10+"px","top":obT+10+"px"},1000,function () {
$(this).remove();
});
})
</script>
</body>
</html>
