头像

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

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

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

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

查看演示 下载资源: 231 下载资源 下载积分: 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
        }
    });
}
评论8
头像

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

  • 头像 7楼
    09-25 00:28
    一分钟的事
    有意思的东西
  • 头像 6楼
    05-17 21:53
    liyan
    很实用,效果也很棒冷汗
  • 头像 5楼
    10-16 12:44
    2943067793
    很多网站都用这个特效!
  • 头像 4楼
    10-12 09:19
    1405366033
    这个很常见不错
  • 头像 3楼
    09-15 18:40
    昨夜的猪啊
    找点有意思的东西
  • 头像 板凳
    07-15 09:56
    码农
    这个有什么用
  • 头像 椅子
    11-02 15:56
    WuliCoder
    太逗了 哈哈
  • 头像 沙发
    07-09 12:22
    Star
    Nice.做鬼脸
1 2