<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加物品的浮标动画</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $cartPostion = $("#cart").offset();
var $cartWidth = $("#cart").width();
var $cartHeight = $("#cart").height();
//此处根据情况获取长宽, 或者inner 或者outer 或者outer(true)
var $pW = $("#point").width();
var $pH = $("#point").height();
// console.log ( $cartPostion );
//点击元素, 调用函数
$("#goods").click(function(){
//锁定元素位置.定位红点位置且显示
var iPostion = $(this).offset();
var iWidth = $(this).width();
var iHeight = $(this).height();
// alert(iPostion.left)
// offset获取的是字典对象, 调用的话使用.跟随需要调用的key:left;top
// alert(parseInt(iPostion.left+iWidth/2-$pW/2))
//定位红点位置.
$("#point").css({
'left':parseInt(iPostion.left+iWidth/2-$pW/2),
'top':parseInt(iPostion.top+iHeight/2-$pH/2),
'display':'block',
//此处 直接更改属性display为block和使用函数show()达成的效果一样.
});
// $("#point").show();
//数值计算的时候, 应用parseInt转成整数.
//计算购物车位置,与元素位置差
$("#point").animate({
left:parseInt( $cartPostion.left+$cartWidth/2-$pW/2 ),
top:parseInt( $cartPostion.top+$cartHeight/2-$pH/2 ),
},200,function(){
$("#point").css({'display':'none'});
var iNum = $("#num").html();
iNum++;
$("#num").html(iNum)
})
//设置红点运动轨迹,画面结束数量增加
})
})
</script>
<style>
#goods{
width: 100px;
height: 100px;
margin: 200px;
background: tan;
text-align: center;
font: 30px/100px "Microsoft Yahei";
cursor: pointer;
}
#cart{
width: 100px;
height: 40px;
background-color: cyan;
text-align: center;
font: 16px/40px "Microsoft Yahei";
position: absolute;
right: 20px;
top: 20px;
}
#point{
width: 20px;
height: 20px;
background-color: red;
display: none;
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
z-index: 9999;
border-radius: 35%;
}
#num{
width: 40%;
height: 100%;
float: right;
background: white;
/*font: 24px/100% "Microsoft Yahei";*/
color: red;
border:2px dashed #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="goods">商品</div>
<div id="point"></div>
<div id="cart">购物车
<div id="num">0</div>
</div>
</body>
</html>
