Рисование диагональной линии с помощью jQuery - PullRequest
Новая
       3

Рисование диагональной линии с помощью jQuery

1 голос
/ 27 января 2012

Я пытаюсь создать диагональную линию с помощью jQuery, которая анимируется из левого верхнего угла экрана в правый нижний угол.Это на самом деле разделить экран пополам с диагональной линией.Я думал создать div высотой 1px и шириной 0, а затем анимировать его ширину до 100%.Но я действительно запутался с позиционированием этого div.Я видел этот эффект на одной странице, и я уверен, что это не был Flash, но я просто больше не могу его найти.

Спасибо

Мирко

1 Ответ

2 голосов
/ 27 января 2012

Так же, как быстрое предположение, на самом деле не 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)

...