购物车--产品图片飞入购物车

来源:互联网 发布:mybatis 打印完整sql 编辑:程序博客网 时间:2024/05/07 03:29
var gtPlay = {
    begin : Array(0,0),
    end : Array(0,0),
    PicID : 0,
    Num : 0,
    Time : 0,
    HandW : Array(0,0,0,0),
    stime:function()
    {
        return this.Time / this.Num;
    },
    anmate:function( h )
    {
        var picId = this.PicID + h;
        $("#" + picId).animate({
            top:this.end[0],
            left:this.end[1],
            width:this.HandW[2],
            height:this.HandW[3]
            //opacity:0.5,
            }, 500, "linear", function()
            {
                $("#" + picId).fadeOut(1500);
                updateNavCartItemNumber();
            });
    },
    Play:function()
    {
        //console.log('a');
        $("img[name=gtPlayname]").remove()
        for( var i = 0; i < this . Num; i ++ )
        {
            $("<img id='" + this . PicID + i + "' src='" + $("#" + this.PicID ) . attr("src") + "' name='gtPlayname' style='clear:both; z-index:999; position:absolute; width:" + this.HandW[0] + "; height:" + this.HandW[1] + "; top:" + this.begin[0] + ";left:" + this.begin[1] + ";'/>") . appendTo("body");
            setTimeout( "gtPlay.anmate(" + i + ")", i * parseInt( this . stime() ) )
        }
    }
}

            var imgId = "proimg";
            var sourceEleTop = document.getElementById( imgId ).offsetTop;
            var sourceEleLeft = document.getElementById( imgId ).offsetLeft;
            var targetEleTop = $('#rightPanel').offset().top + 5;
            var targetEleLeft = $('#rightPanel').offset().left + 5;
            gtPlay.begin = Array( sourceEleTop + 'px', sourceEleLeft + 'px'); //start 源坐标
            gtPlay.end = Array( targetEleTop + 'px', targetEleLeft + 'px');//target 终点坐标
            gtPlay.PicID = "proimg"; //pic id
            //alert(gtPlay.PicID);
            gtPlay.Num = 1; //num
            gtPlay.Time = 5000; //spend time
            gtPlay.HandW = Array("180px","180px","40px","40px");//图像变化大小
            gtPlay.Play();