核心提示：购物车飞入的动画效果HTML：!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title懒人原生模拟移动APP飞入购物车动画效果/titlemeta co...
购物车飞入的动画效果
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒人原生模拟移动APP飞入购物车动画效果</title>
<meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 代码部分begin -->
<p class="store">
<aside class="menu">
<li typeid="tuijian">店铺推荐</li>
<li typeid="123100" class="current">热卖推荐</li>
<li typeid="122820">嗦碗粉</li>
<li typeid="123088">赤粉套餐</li>
<li typeid="122821">秘制盖码（肉不够？这里这里加！）</li>
<li typeid="122822">秘制卤味米粉伴侣</li>
<li typeid="123057">夏日特饮</li>
</aside>
<aside class="list">
<p id="tuijian" class="item">
<li productid="1444574" productattrid="3665545" packcost="2">
<img src="images/logoimg.png" alt="" style="width: 50px;height: 50px;display:inline-block;">
<p style="display: inline-block;">
<p class="title">【微辣】脆嫩牛肚粉</p>
<p class="price">￥20.0</p>
<p class="sale">近期销售7份</p>
<p class="add0"></p>
<p class="add1">
<i class="reduce"></i>
<span class="number">1</span>
<i class="add"></i>
</p>
</p>
</li>
<li productid="1446265" productattrid="3669009" packcost="2">
<p class="title">【爆款】赤粉三侠</p>
<p class="price">￥28.0</p>
<p class="sale">近期销售6份</p>
<p class="add0"></p>
<p class="add1">
<i class="reduce"></i>
<span class="number">1</span>
<i class="add"></i>
</p>
</li>
<li productid="1444571" productattrid="3665542" packcost="2">
<p class="title">【酱汁】汁骨牛排粉</p>
<p class="price">￥24.0</p>
<p class="sale">近期销售3份</p>
<p class="add0"></p>
<p class="add1">
<i class="reduce"></i>
<span class="number">1</span>
<i class="add"></i>
</p>
</li>
</p>
</aside>
</p>
<footer class="shop">
<p class="money">
<!--<span id="amount">0</span>-->
<p class="shopcar">
<span id="amount">99</span>
<img src="images/shopcar.png" alt="">
</p>
<p class="num">￥<span id="price">0.0</span></p>
</p>
<p id="go" class="go">选好了</p>
</footer>
<img src="../images/logo.png" style="display:none;">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.fly.min.js"></script>
</body>
</html>
JavaScript：
function addFly(obj,event) {
/*var addcar = $(this);
var img = addcar.parent().find('img').attr('src');//获取当前点击图片链接
var flyer = $('<img class="u-flyer" src="'+img+'">');//抛物体对象*/
var offset = $('#amount').offset();
var img =$(obj).parents('li').find('img').attr('src');//获取当前点击图片链接
// alert(img);
var flyer = $('<img class="u-flyer" src="'+img+'"/>');//抛物体对象
flyer.fly({
start: {
left: event.pageX-40,//抛物体起点横坐标
top: event.pageY-20//抛物体起点纵坐标
},
end: {
left: offset.left,//抛物体终点横坐标
top: offset.top,//抛物体终点纵坐标
width: 24,
height: 24,
}
});
}
$(function(){
$(".add").on("click",function(){ //增加数量
var n=$(this).prev('span').text();
var num=parseInt(n)+1;
if(num==0){return;}
$(this).prev().text(num);
addFly(this,event);
$("#amount").text(num);
});
$(".reduce").on("click",function(){//减少数量
var n=$(this).next().text();
var num=parseInt(n)-1;
if(num==0){return;}
$(this).next().text(num);
})
})
