本篇内容主要讲解“Jquery怎么实现商品飞入购物车的动画效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Jquery怎么实现商品飞入购物车的动画效果”吧!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.good-area{ width:200px; position:absolute; left:100px; top:50px;}
.good{ width:200px; height:180px; background:#ccc;}
.good img{ width:100%; height:100%;}
.shop_car{ width:100px; height:30px; line-height:30px; text-align:center; position:absolute; left:1000px; top:300px; background:#eee; color:red;}
#add_shopcar{ height:20px; line-height:20px; text-align:center; color:#03F; background:#F90;}
</style>
</head>
<body>
<div class="good-area">
<div class="good"><img src="https://cache.yisu.com/upload/information/20200311/55/213987.jpg" /></div>
<div class="add_shopcar">加入购物车</div>
</div>
<div class="shop_car" id="shop_car">我是购物车</div>
<script type="text/javascript" src="http://www.dreamjser.com/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
(function(){
var shop_car=$('#shop_car'),
carLeft=shop_car.offset().left,
carTop=shop_car.offset().top;
/**
*为所有购买按钮增加动画效果
**/
$('.add_shopcar').click(function(){
var good=$(this).parent().find('.good'),
goodLeft=good.offset().left,
goodTop=good.offset().top;
if(good.is(':animated')){
return;
}
var copyGood=good.clone();
$('body').append(copyGood);
copyGood.css({position:'absolute',left:goodLeft,top:goodTop,border:'5px #f00 solid'});
copyGood.animate({width:80,height:80,left:carLeft,top:carTop,opacity:1},800,function(){
copyGood.remove();
});
});
})();
</script>
</body>
</html>到此，相信大家对“Jquery怎么实现商品飞入购物车的动画效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
