<!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>