Firefoxで画像を表示した際に左寄せで90度回転させるJavascript。
Firefox31では画像が真ん中に表示されますが、このスクリプトは画像を左上につけて右に90度回転させます。単に回転させる、と言う事から少し外れた動きなので拡大縮小には向いていません。
拡大したい場合は以前の記事ををご覧ください。
FirefoxでCSS3のTransFormを利用してWebページを回転、上下逆さまにする。 - いつものしらべてもでてこない
使い方
次のリンクを右クリック保存してください。と思ったら以前の様にリンク出来なかったので範囲選択して右クリックしてコピーしたらブックマークを開いて右クリックし新しいブックマークに追加してURLの欄に貼り付けてください。
javascript:(function(){bt=Math.max.apply(null,[document.body.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.documentElement.clientHeight]);var%20b=document.body;sh=b.offsetHeight;sw=b.offsetWidth;b.style.MozTransformOrigin='100%%20100%';im=document.body.firstChild;imc=im.getBoundingClientRect();b.style.MozTransform='rotate(90deg)%20translateX('+(%20(sw-im.width)/2+im.width)+'px)%20translateY('+(0)+'px)';sb=window.innerWidth-document.documentElement.scrollWidth;scroll(-bt,0);im.style.left=(-sb)+'px';im.style.top=(sw-im.height-(im.width>bt?sb:0)%20)+'px';})();
次に、画像を右クリックする等して画像だけを表示させた状態で、ブックマークしたスクリプトを開きます（画像のリンクをクリックして開いた状態でも可）。
スクリプト
こんな具合です。
javascript:(function(){
bt=Math.max.apply(null,[document.body.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.documentElement.clientHeight]);
var%20b=document.body;
sh=b.offsetHeight;sw=b.offsetWidth;
b.style.MozTransformOrigin='100%%20100%';
im=document.body.firstChild;
imc=im.getBoundingClientRect();
b.style.MozTransform='rotate(90deg)%20translateX('+(%20(sw-im.width)/2+im.width)+'px)%20translateY('+(0)+'px)';
sb=window.innerWidth-document.documentElement.scrollWidth;scroll(-bt,0);im.style.left=(-sb)+'px';
im.style.top=(sw-im.height-(im.width>bt?sb:0)%20)+'px';})();
回転させる際に左につめて回転した後に上につめる形で位置を合わせています。
回転時にX、Yの両方を位置調節しようとすると上手く出来ませんでした。
スクロールバーの幅はを三項演算子を使って処理しています。
Firefoxでは画像だけを表示させた状態はdocument.bodyにimgタグが入ってる状態になっているので簡単にfirstChildで指定して処理しています。その為、少しでも変更されると動かなくなります。
拡大縮小で上手く行かないのは位置調節に手間取ってずらす方を間違えた気がするのでそのうち修正するかもしれません。
以上。
