当前位置:asp编程网>技术教程>Javascript教程>  正文

js实现商品抛物线动画方式加入购物车

2017-11-29 17:08:29   来源:网络   作者:佚名   浏览量:3070   收藏
代码如下:
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">      
    <title>js实现商品抛物线动画方式加入购物车</title>   
    <script src="jquery-1.9.1.min.js"></script>  
    <script src="jquery.fly.min.js"></script>  
    <style>
        .goods {  
            width: 50px;  
            height: 50px;  
            position: absolute;  
            background: red;  
            border-radius: 50%;  
            top: 25%;  
        }            
        .cart {      
            width: 50px;  
            height: 50px;  
            position: absolute;  
top: 5%;
            right: 10%; 
text-align:center; 
            background:url(cart.png);
background-size:50px 50px;
        }  
.cart div{
color:#f00;
margin-top: 12px;
}
    </style>  
</head>  
  
<body>  
    <div class="goods"></div>  
    <div class="goods" style="left:10%;"></div>  
    <div class="cart"><div>0</div></div>
</body>  
<script>
var num = 0;
var offset = $('.cart').offset();  
$('.goods').click(function (event) { 
var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接
var flyer = $('<img class="flyer-img" src="cart.png" width="26" height="26">'); //抛物体对象
flyer.fly({  
start: {  
left: event.pageX,  
top: event.pageY  
},  
end: {  
left: offset.left,  
top: offset.top,  
width: 0,  
height: 0  
},  
onEnd: function () {    
setTimeout(function () {
num ++;
$('.cart>div').html(num);
}, 200);  
}  
});  
});
</script>
</html>
里面的jquery-1.9.1.min.js、jquery.fly.min.js、cart.png请大家网上搜索一下。


关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网