用jQuery绘制对角线答案

【问题标题】：Drawing diagonal line with jQuery用jQuery绘制对角线
【发布时间】：2014-07-08 19:46:32
【问题描述】：

我正在尝试使用 jQuery 创建一条从屏幕左上角到右下角动画的对角线。它实际上会用对角线将屏幕分成两半。我正在考虑创建一个 1px 高和 0 宽度的 div，然后将其宽度设置为 100%。但我真的对定位这个 div 感到困惑。我在一页上看到了这个效果，我确定不是 Flash，但我再也找不到了。

谢谢

米尔科

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

作为一个快速的猜测，不是真正的 jQuery，而是我能想到的，你可能想要这样的东西：

var diag = document.body.appendChild(document.createElement('div'));
diag.style.width = "1px";
diag.style.position = "fixed";
diag.style.left = diag.style.top = "0px";
diag.style.backgroundColor = "black";
diag.style.transformOrigin = "top left"; // add vendor extensions as needed
(window.onresize = function() {
    var w = window.innerWidth || document.documentElement.clientWidth,
        h = window.innerHeight || document.documentElement.clientHeight,
        a = Math.atan2(w,h),
        d = Math.sqrt(w*w+h*h);
    diag.style.height = d+"px";
    diag.style.transform = "rotate(-"+a+"rad)";
    // add vendor extensions as needed
})();

（在 IE9 中使用 msTransform 和 msTransformOrigin 属性测试）

【讨论】：

谢谢，这条线确实画好了，但它不是动画的，它已经制作好了。它没有从 0 到 100% 的动画。
这可以通过在最后一行之后立即添加动画来解决 - 将 diag.offsetHeight 作为目标高度，将高度设置为 0，然后进行动画处理。