Question

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

由于

的Mirko

Answer 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
})();

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

用jQuery绘制对角线

1 个答案: