HTML5 实现Link跳线效果

之前我们推出过Flex版本的Link跳线效果,现在基于HTML5新版本的跳线效果也实现了,细微之处我们进行了改进,如link倾斜的时候Offset方向始终保持垂直等。先看效果。
HTML5 实现Link跳线效果
HTML5 实现Link跳线效果
实现的算法和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;

只封装了加和乘法,其他的运算方法也可以将矩阵表达式转化过来就可以了,如平移、旋转等。如需源码,可邮箱申请。jeff.fu@servasoft.com

上一篇:RCP:如何移除Toolbar中的Quick Access


下一篇:护航者,腾讯云: 2017年度游戏行业DDoS态势报告—回溯与前瞻