HTML5 实现Link跳线效果

之前我们推出过Flex版本的Link跳线效果，现在基于HTML5新版本的跳线效果也实现了，细微之处我们进行了改进，如link倾斜的时候Offset方向始终保持垂直等。先看效果。


实现的算法和Flex基本一致，在这不做进一步分析了，算法中使用到矩阵的运算，所以在这贴一下矩阵运算的封装。

var matrix=function(options){

    if (!(this instanceof arguments.callee)) {

        return new arguments.callee(options);

    }

    this.init(options);

};



matrix.prototype={

    init:function(options){

        this.matrix=options.matrix;

    },



    add:function(mtx){

        var omtx=this.matrix;

        var newMtx=[];

        if(!mtx.length||!mtx[0].length||mtx.length!=omtx.length||mtx[0].length!=omtx[0].length){

            return;

        }

        for(var i=0,len1=omtx.length;i<len1;i++){

            var rowMtx=omtx[i];

            newMtx.push([]);

            for(var j=0,len2=rowMtx.length;j<len2;j++){

                newMtx[i][j]=rowMtx[j]+mtx[i][j];

            }

        }

        this.matrix=newMtx;

        return this;

    },



    multiply:function(mtx){

                var omtx = mtx.matrix;

                var mtx = this.matrix;

                var newMtx=[];

                if(!isNaN(mtx)){

                    for(var i=0,len1=omtx.length;i<len1;i++){

                        var rowMtx=omtx[i];

                        newMtx.push([]);

                        for(var j=0,len2=rowMtx.length;j<len2;j++){

                            omtx[i][j]*=mtx;    

                        }

                    }

                    return new matrix({matrix:newMtx});

                }

                var sum=0;

                for(var i=0,len1=omtx.length;i<len1;i++){

                    var rowMtx=omtx[i];    

                    newMtx.push([]);

                    for(var m=0,len3=mtx[0].length;m<len3;m++){

                        for(var j=0,len2=rowMtx.length;j<len2;j++){

                            sum+=omtx[i][j]*mtx[j][m];    

                        }

                        newMtx[newMtx.length-1].push(sum);

                        sum=0;

                    }

                }

                this.matrix=newMtx;

                return this;        

            }            

        };

        this.Matrix=matrix;

只封装了加和乘法，其他的运算方法也可以将矩阵表达式转化过来就可以了，如平移、旋转等。如需源码，可邮箱申请。[email protected]