zoukankan      html  css  js  c++  java
  • 基于jquery fly插件实现加入购物车抛物线动画效果

    $(function() {
            var offset = $("#end").offset();
            $(".addcar").click(function(event){
                var addcar = $(this);
                var img = addcar.parent().find('img').attr('src'); // 获取当前点击图片链接
                var flyer = $('<img class="flyer" src="'+img+'">'); // 抛物体对象
                flyer.fly({
                    start: {
                        left: event.clientX, // 抛物体起点横坐标
                        top: event.clientY // 抛物体起点纵坐标
                    },
                    end: {
                        left: offset.left+10, // 抛物体终点横坐标
                        top: offset.top+10, // 抛物体终点纵坐标
                         0, // 抛物体宽度
                        height: 0 // 抛物体高度
                    },
                    onEnd: function(){
                        $("#msg").show().animate({ '250px'}, 200).fadeOut(1000); // 成功加入购物车动画效果
                        addcar.css("cursor","default").removeClass('orange').unbind('click'); // 删除加入购物车按钮点击事件
                        this.destory(); // 销毁抛物体
                    }
                });
            });
        });

    源码地址:https://github.com/chenjiacheng/jquery.fly-demo

  • 相关阅读:
    取随机数
    端口号
    cut命令
    渗透
    ssh免密登陆
    漏洞扫描
    信息收集1:DNSEUM命令
    Centos6与Centos7的区别
    HAPROXY+KEEPALIVED实现负载均衡
    this的用法
  • 原文地址:https://www.cnblogs.com/chenjiacheng/p/6522604.html
Copyright © 2011-2022 走看看