头像

fly.js抛物线连续不断加入购物车

来源:http://www.sucaihuo.com/js/298.html 素材火管理员 2015-08-20 17:48浏览(1166) 收藏

本文以fly.js抛物线插件来完成加入购物车效果
fly.js抛物线连续不断加入购物车
分类:3D > 抛物线 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 232 下载资源 下载积分: 20 积分

HTML

<div class="m-sidebar">
    <div class="cart">
        <i id="end">
        </i>
        <span>
            购物车
        </span>
    </div>
</div>

jQuery

$('html,body').on('click', addProduct);
function addProduct(event) {
    var offset = $('#end').offset(),
    flyer = $('<img class="u-flyer" src="images/profile-80_1.jpg"/>');
    flyer.fly({
        start: {
            left: event.pageX,
            top: event.pageY
        },
        end: {
            left: offset.left,
            top: offset.top,
            width: 20,
            height: 20
        }
    });
}
评论7
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

1 2