<![CDATA[Серый форум — JavaScript: поворот элемента страницы на определенный угол]]> http://forum.script-coding.com/viewtopic.php?id=2432 Fri, 02 Nov 2012 17:36:29 +0000 PunBB <![CDATA[Re: JavaScript: поворот элемента страницы на определенный угол]]> http://forum.script-coding.com/viewtopic.php?pid=65364#p65364 Простенькие часы, набросанные на скорую руку с использованием -ms-Transform:rotate работали только в ИЕ9 (hta, поэтому без кроссбраузерных изысков). Знакомые попросили сделать и для ИЕ8, в связи с чем разыскал этот пример. Оказалось, что matrix вращает весьма забавно: верхняя и левая граница не смещаются, поэтому вращение получается, как если кубик крутить в углу коробки. Вот "часы", в которых, кроме матричного фильтра используется смещение абсолютно позиционируемых элементов. Забавно, но в ИЕ9 рендерится гораздо хуже, чем в ИЕ8 (видимо, чтобы все переходили на -ms-Transform), на более старых не проверял. clock.hta:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Sergeant</title>
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <script language="JScript">
    moveTo(screen.availWidth-250,0);
    self.resizeTo(250,250);
  </script>
  <hta:application
   applicationName="matrix-clock-IXc"
   border="none"
   caption="no"
   icon="%SystemRoot%/system32/twext.dll"
   innerBorder="no"
   scroll="no"
   selection="no"
   singleInstance="yes"
   version="0.5"
   />
</head>
<body bgcolor="inactivecaption"></body>
<script>
  var
   g=Math.PI/180,
   h={        //hands
    h:{c:'windowtext',i:'dh',l:50,w:5},
    m:{c:'windowtext',i:'dm',l:80,w:3},
    s:{c:'crimson',i:'ds',l:100,w:1}
   },
   m=new Date(),
   r=100,    //radius
   t,
   x=~~document.documentElement.clientWidth/2,    //center position x
   y=~~document.documentElement.clientHeight/2;    //center position y
  t=document.createElement('DIV');
  t.id='dd';
  t.style.pixelLeft=100;
  t.style.pixelTop=0.65*r;
  t.style.position='absolute';
  t.style.textAlign='center'
  t.style.width='50px';
  document.documentElement.appendChild(t);
  fh(h.h);
  fh(h.m);
  fh(h.s);
  fd(12,24,0,'windowtext');
  fd(60,6,16,'graytext');
  function fc(){    //clock
    t=new Date();
    if(t.getSeconds()==m.getSeconds())window.setTimeout('fc()',10);
    else{
    fr(ds,6*(m.getSeconds()+1));
    if(t.getMinutes()!=m.getMinutes()){
      fr(dm,6*(m.getMinutes()+1));
      fr(dh,30*m.getHours()+m.getMinutes()/2);
      if(t.getDate()!=m.getDate())ff();
    }
    m=t;
    window.setTimeout('fc()',990);
    }
  }
  function fd(a,b,e,f){    //digits a-number b-size e-intro f-color
    for(var i=0;i<a;i++){
      t=document.createElement('DIV');
      t.innerText=i==59?0:i+1;
      t.style.color=(i+1)%5?f:'windowtext';
      t.style.fontSize=t.style.height=t.style.lineHeight=t.style.width=b+'px';
      t.style.pixelLeft=x-b/2 +Math.sin(360/a*g*(i+1))*(r-e);
      t.style.pixelTop=y-b/2 -Math.cos(360/a*g*(i+1))*(r-e);
      t.style.position='absolute';
      t.style.textAlign='center'
      document.documentElement.appendChild(t);
    }
  }
  function ff(){    //date
    dd.innerText=
     m.getDate()+'.'+(m.getMonth()>8?m.getMonth()+1:'0'+(m.getMonth()+1))+
     '\n'+m.getFullYear();
  }
  function fh(e){    //hands
    t=document.createElement('DIV');
    t.id=e.i;
    t.style.backgroundColor=e.c;
    t.style.height=e.l+'px';
    t.style.position='absolute';
    t.style.width=e.w+'px';
    t.style.filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand")';
    document.documentElement.appendChild(t);
  }
  function fr(e,f){    //rotate
    var
     d=e.filters.item(0),
     c=Math.cos(f*g),
     s=Math.sin(f*g),
     l=~~e.style.height.substring(0,e.style.height.length-2),
     w=~~e.style.width.substring(0,e.style.width.length-2);
    d.M11=c,d.M12=-s,d.M21=s,d.M22=c;
    e.style.pixelTop=(y-l)+l*(c>0?1-c:1)+(c>0?1:0)-(w-1)/2;
    e.style.pixelLeft=(x-l)+l*(s<0?1+s:1)+(s<0?1:0)-(w-1)/2;
  }
  window.onload=function(){
    fr(ds,6*m.getSeconds());
    fr(dm,6*m.getMinutes());
    fr(dh,30*m.getHours()+m.getMinutes()/2);
    fc();ff();
  }
  document.oncontextmenu=function(){
    window.close();
  }
</script>
</html>

Кроме того, поигравшись с преобразованиями, нашел решение давнишней проблемы: в головную контору периодически надо отправлять отсканированные в pdf документы с "синими" подписями в каждой строке. Отсканировать подпись - не проблема, но уж больно они одинаковые, когда подряд. Пример работает с дивами, но, кому надо, имг подставят... random.hta:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <hta:application
   id="HTApp"
   />
  <style type="text/css">
   *{color:navy;font:normal 14px/16px Arial;margin:0;padding:0;}
   body{overflow:hidden;}
  </style>
</head>
<body onkeydown="if(event.keyCode==27)window.close();">
</body>
<script type="text/jscript" language="JScript">
  var t;
  for(var i=0;i<10;i++){
    t=document.createElement('DIV');
    t.innerText='Подпись';
    t.style.filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand")';
    t.style.margin='5px 0 5px 200px';
//    t.style.position='absolute';
    document.documentElement.appendChild(t);
  }
  var d=document.getElementsByTagName('DIV');
  for(var i=0;i<d.length;i++){
    var f=d[i].filters.item(0);
    f.M11=0.6+Math.random()/3,
    f.M12=-0.5-Math.random()/10,
    f.M21=0.1-Math.random()/5,
    f.M22=0.9+Math.random()/25;
  }
</script>
</html>
]]> Fri, 02 Nov 2012 17:36:29 +0000 http://forum.script-coding.com/viewtopic.php?pid=65364#p65364 <![CDATA[JavaScript: поворот элемента страницы на определенный угол]]> http://forum.script-coding.com/viewtopic.php?pid=15787#p15787 HTML-документ, приведённый ниже, отобразит на экране красный квадрат. При щелчке по квадрату он плавно повернётся на 90 градусов. Работает только в Internet Explorer, применяется фильтр "Matrix".

<div style='width:100px;height:100px;position:absolute;background-color:red;top:200px;left:200px;
    filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand");' 
    onclick='Spin(this.filters.item(0), 0, 1)'></div>
<script>
function Spin(aFilter, aDeg, aInc) {
    aDeg += aInc * 4;
    var rad = aDeg * Math.PI * 2 / 360,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad);
    aFilter.M11 = costheta;
    aFilter.M12 = -sintheta;
    aFilter.M21 = sintheta;
    aFilter.M22 = costheta;
    if (aDeg < 90) {
        window.setTimeout(function () {
                       Spin(aFilter, aDeg, aInc);
                   }, 10);
    }
}
</script>
]]> Mon, 10 Nov 2008 18:27:56 +0000 http://forum.script-coding.com/viewtopic.php?pid=15787#p15787