首页 > 代码库 > HTML5 实现Link跳线效果
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;
只封装了加和乘法，其他的运算方法也可以将矩阵表达式转化过来就可以了，如平移、旋转等。如需源码，可邮箱申请。jeff.fu@servasoft.com
HTML5 实现Link跳线效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。