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]
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。