Fork me on GitHub
随笔 - 317  文章 - 1  评论 - 11  阅读 - 27万

jquery加入购物车飞入的效果

主要原理是:点击当前图片的时候,复制(克隆)当前图片在当前位置,然后利用jQuery的animate()方法实现图像的飞入效果

效果预览:http://runjs.cn/detail/qmf0mtm1

复制代码
    function MoveBox(obj) {
        var divTop = $(obj).offset().top;
        var divLeft = $(obj).offset().left;
        $(obj).css({ "position": "absolute", "z-index": "500", "left": divLeft + "px", "top": divTop + "px" });
        $(obj).parent().append($(obj).clone());
        $(obj).animate({ "left": ($("#posBtnR", parent.document).offset().left - $("#posBtnR", parent.document).width()) + "px", "top": $("#posBtnR", parent.document).offset().top + "px", "width": "100px", "height": "70px" }, 1000, function () {
            $(obj).animate({ "left": $("#posBtnR", parent.document).offset().left + "px", "top": $("#posBtnR", parent.document).offset().top + "px" }, 1000);
            num++;
            $("#btn_num", parent.document).text(num).animate({ 'opacity': 1, 'marginTop': '0' }, 500, function () {
                setTimeout(function () { $("#btn_num", parent.document).hide() }, 8000);
            });
        });
    }
复制代码

 

posted on   雨为我停  阅读(919)  评论(0编辑  收藏  举报
编辑推荐:
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
阅读排行:
· 聊一聊坑人的 C# MySql.Data SDK
· 没事别想不开去创业!
· Java 项目愚蠢的分层及解决办法
· 一个.NET开源、易于使用的屏幕录制工具
· C#中 Task 结合 CancellationTokenSource的妙用
历史上的今天:
2014-03-25 面试题目(2)
< 2024年12月 >
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4
5 6 7 8 9 10 11

点击右上角即可分享
微信分享提示