javascript - JS。非标准覆盖表

Question

我有表格的视觉选择，可以为鼠标悬停的表格单元格及其行和列着色，就像一些十字线一样。

参见 JSFiddle:

http:// jsfiddle.net/arhangelsoft/0ardb3u0/40/

但我需要 JS 自动和动画移动效果(如缓动)，比如从 0,0 十字准线平滑移动到 55 单元格，之后同样平滑移动到 22 单元格等等。

我在想，怎么做。

目前我有一个想法: 为行(你看到它是蓝色的)、列和目标单元格创建绝对 div。 之后，将这些元素一起移动到动画功能中，从 x 点到 y 点。

是否有更简单的方法/想法来做到这一点？

我想通过 JavaScript 得到的结果的类似例子你可以在这里下载(GIF 图片，大(2 mb)):
download and see 抱歉，我不能把它变小。

Answer 1

给你:http://jsfiddle.net/andunai/0ardb3u0/41/

(我已经注释掉你所有的代码作为引用，新代码在 fiddle 的底部。)

你是对的:这里的方法实际上是创建 2 个绝对 div 并根据悬停的单元格移动它们。

对于动画，我们可以在此处使用 CSS transition 属性:

transition: all 0.1s linear

...所以当我们做 $(...).css(...) 改变它的 width, height , top 和 bottom, 属性从旧值平滑过渡到新值。 您仍然可以使用 jQuery 的 $.animate() 动画方法，但 CSS 过渡基本上更快更流畅。

另请注意，我使用 $(...).outerWidth(...) 而不是 width(...) 来正确调整单元格大小.

还有一件事:注意这个 CSS 行 -

pointer-events: none;

这非常重要，因为它使鼠标事件的十字准线 div 变得“透明”，这意味着实际的点击将“穿过”它们并被适当的 td 元素捕获。

尽情享受吧!