之前我们推出过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跳线效果的更多相关文章

  1. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  2. html5实现饼图和线图

    html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 ...

  3. HTML5实现微信聊天气泡效果

    最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...

  4. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. HTML5夜空烟花绽放动画效果

    模板描述:HTML5夜空烟花绽放动画效果基于HTML5 canvas制作,模拟夜空烟花绽放动画效果,烟花会在夜空打出贺词,有新年快乐.合家幸福.万事如意.心想事成.财源广进等,文字可以自定义,做成各种 ...

  6. css样式实现字体删除线效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 华硕 F1A55-M LX3系列跳线图

    天啊,第一次遇到这么变态的主板跳线...浪费我好久时间找到这跳线图

  8. 华硕主板M2N-电源跳线怎么接

    华硕主板M2N 详细参数 http://detail.zol.com.cn/91/90618/param.shtml 电源跳线的连接方法:1.把所有排线理在一起,根据上面的标注,先来明确每根线的定义: ...

  9. 基于HTML5 Canvas可撕裂布料效果

    分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 在线预览   源码下载 实现的代码. ...

随机推荐

  1. J2SE基础:11.异常处理

    1:异常的概念: 异常是程序在执行时发生的事件(异常发生在执行期间). 程序出现错误.打断原本的运行流程. 2:Java中处理异常. 在Java中.异常被封装成一个对象.(属性和方法) 3:异常产生 ...

  2. C#下JSON字符串的反序列化

    C#下JSON字符串的反序列化,一般都是用newtonsoft.json,比较方便..net当然也有提供相应功能,但觉得比较复杂. 所谓反序列化,就是将一个包含JSON内容的字符串,转换回指定对象(不 ...

  3. java Bean及其使用

    1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...

  4. 安装 pip pip 包 安装路径

    python2 -m pip install --upgrade pip --force-reinstall pip uninstall pandas pip install --install-op ...

  5. WinForm里面连接Oracle数据库

    WinForm里面连接Oracle数据库 string oradb = "Data Source=(DESCRIPTION="             + "(ADDRE ...

  6. 2017年最新VOS2009/VOS3000最新手机号段导入文件(手机归属地数据)

    VOS2009.vos3000.vos5000最新手机号段归属地数据库导入文件. 基于2017年4月最新版手机号段归属地制作 共360569条记录,兼容所有版本的昆石VOS,包括VOS2009.vos ...

  7. JS浮点数精度运算

    一般来讲,我们在项目中必不可少的需要进行各种数值的计算,但是这种计算全部放在服务端会给服务器带来很大的压力,所以势必要客户端来 分担一些计算的压力. 从客户端来说,JavaScript是一门弱类型语言 ...

  8. bzoj 1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名【bitset+Floyd传递闭包】

    把关系变成有向边,稍微想一下就是要求在有向图中不能到达的点对个数,这个可以用Floyd传递闭包来做,但是n^3的复杂度跑不了1000 考虑bitset优化! 因为传递过程只会出现0和1,用bitset ...

  9. web界面bug-临时

    一.登录页面 二.首页 三.项目 四.项目池 五.专家管理 六.审批 七.日/周报 八.设置

  10. iOS静态库.Framework制作

    首先要解释一下什么是库,库(Library)其实就是一段编译好的二进制代码,加上头文件就可以供别人使用,一般会有两种情况要用到库: 某些代码需要给别人使用,但是我们不希望别人看到源码,就需要以库的形式 ...