Hatena::ブログ(Diary)

お前の血は何色だ!! 4 このページをアンテナに追加 RSSフィード Twitter

2010-09-04

クロスブラウザーな回転

f:id:rti7743:20100904185828p:image

jQueryを利用したクロスブラウザーな回転を作りました。

http://rtilabs.net/files/2010_09_04/rotate.html

jquery 1.4.4 以上だとエラーになってしまうのバグを教えてもらったので、対策バージョンを作成しました。

http://rtilabs.net/files/2011_02_03/rotate.html

IEで正しく動かなかったので修正しました。

http://rtilabs.net/files/2011_09_16/rotate.html


モダンブラウザcss3 の transformで回転させています。

モダンではないIEはfilterでがんばって回転させています。

IEでの回転の計算式は http://p2b.jp/200912-CSS3-Transform-for-IE8 さんを参考にしています。

IEだと filter を利用した回転なので、IE5.5 から回るはずです。

IEすごいですね。


jqueryの拡張として作っているので、楽に使えると思います。

ついでに、$(elem).css({rotate: 10 }) みたいなシュガーとか $(elem).rotate(10) とかできます。甘々です。


animate() も作っているので、 簡単にぐるぐる回ります。

var deg = Math.floor( Math.random() * 1000 );
$('#target').animate({rotate: deg});

いろいろ甘すぎて糖分が気になる人向けに $(elem).css({transform: 'rotate(256deg)'}); とかもできるようにしています。

甘くないですね。




本当は、、、 border-radius とかも再現したかったんですが、、、

f:id:rti7743:20100904185829p:image

http://fetchak.com/ie-css3/ を途中まで移植したんですけど、

border-radiusして回転するととんでもないことになるんですよね、、、


完全に動作しない作成途中のバージョン

http://rtilabs.net/files/2010_09_04/rotate_bug.html


どうせ、9/15にIE9がでてここら辺すべて解決されるから、もう作らなくてもいいよね。

もう、ゴールしていいよね。。。

ソースコードはご自由にお使いください。

そのうち、jquery周りのソースの解説をしたいような。

最近技術ネタをまったく書いていなかったので反省中(´・ω・`)

JSJS 2011/02/02 18:00 素晴らしい。大変参考になりました。
ただjquery-1.4.4以降だと.matchとか.replaceでエラーが出てしまうようです。

rti7743rti7743 2011/02/03 08:33 あらら、、
修正版を作成しました。こちらでどうでしょうか?
http://rtilabs.net/files/2011_02_03/rotate.html

JSJS 2011/02/08 12:33 おお。素敵。ばっちりです。ありがとうございます。

ruinruin 2011/09/11 00:55 修正版のほうのデモサイトを覗いてみたところ、Chromeでは正常に回転しましたが、IE8では123行目でエラーが出ましたので報告します。
zipをDLしてVer1.4.2で起動したところIE8でも正常に表示されました。

jQueryの画像回転系ライブラリは安定して動作するものが中々見つからないので、このライブラリに期待しています。お時間に余裕がある時にでも対応していただければ幸いです。

rti7743rti7743 2011/09/11 10:31 なんとかするのでちょっとまってね。
メールかtwitter とかで 連絡いただけると治ったら連絡しますです。

ruinruin 2011/09/12 23:35 おー、対応待ってます。
ブログちょくちょく見させてもらってますので、連絡云々は多分大丈夫だと思います。

rti7743rti7743 2011/09/16 21:41 修正バージョン作りました。
http://rtilabs.net/files/2011_09_16/rotate.html

ruinruin 2011/09/19 02:50 確認しました。ばっちりですね。ありがとうございました!

koukikouki 2011/12/15 12:40 はじめまして。koukiと申します。
こちらのソースを使用させていただきたいと思い、
以下の様な、画像にマウスを乗せると動くhtmlを作成しましたが、
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/master.css">
<script type="text/javascript" src="js/jquery.1.5.js"></script>
<script type="text/javascript" src="js/rotate.js"></script>
<script type="text/javascript">
$(function(){
$("#image").hover(function(){
$(this).stop().animate({width:"105px",height:"100px"},{duration:300});
},
function() {
$(this).stop().animate({width:"100px",height:"95px"},{duration:600});
});
});
</script>
</head>
<body>
<div class="kaiten&Kakudai" style="left:5px;width:400px;height:250px;">
<div style="position:relative;left:300px;top:100px;">
<a href="#" onmouseover="$('#image').css({transform: 'rotate(15deg)'}); return false;" onmouseout="$('#image').css({transform: 'rotate(0deg)'} ); return false;" >
<img id="image" class="image1" src="images/image1.png">
</a>
</div>
</div>
</body>
</html>
このソースをIE6で表示すると回転はしますが軸がずれてしまいます。
あと、マウスを乗せた時回転しながら拡大もさせたい(マウスを外すと両方元通り)のですが、
突然コメントで、大変申し訳ないのですが、
ご教示頂けましたら、大変光栄です。
宜しくお願いいたします。

rti7743rti7743 2011/12/17 01:39 IEで長方形がおかしくなるのはバグですね。
修正しましたので、再度ダウンロードしてください。
今度は正しく動作するはずです。

koukikouki 2011/12/19 13:20 ご回答、修正頂きまして、真に有難うございます。
こちら再度ダウンロードいたしましたが、
前回のコメントで記載したソースをIE6で実行すると、
画像が大きく右下に飛んでしまい、
その後マウスオーバーで回転しますが、軸がずれてしまいます。
更にそこからマウスを右下の方へずらしていくと、
画像がどんどん大きくなってしまいます。
他のブラウザではスムーズに回転+拡大動作になりますが、
IE6の場合は、回転と拡大が別々に行われるように見えます。

$(function(){
$("#image").hover(function(){
の拡大の処理を外したところ、
画像が右下へテレポートしたり、
大きくなりすぎたりする現象はなくなりましたが、
やはり回転時に軸がずれてしまいます。
IEのDebugBarを見ると、
警告はいくつかありましたが、エラーはないです。
Firefox、Chromeでは正常動作しておりますが、
Chromeのデベロッパーツールのコンソールには、
マウスオーバーで以下のエラーが出ました。
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
度々申し訳ありません。

rti7743rti7743 2011/12/19 18:30 調査します。しばらくお待ちください。

rti7743rti7743 2011/12/19 22:32 これは難しいですね。。。

rotate.js の方も直しました。
もう一度ダウンロードして下さい。

hover で任意の大きさに拡大しながら利用する場合、IEでは一部制限があるようです。
回転させるオブジェクトの style="width=xx;height=xxx" または、 <img width=xxx height=xxx> を必ず指定してください。
IEは、エブジェクトを回転や拡大させると、 obj.offsetWidth や obj.offsetHeight を変形を考慮したサイズに修正してしまいます。

次に、上記理由によりobj.offsetWidth や obj.offsetHeight が破壊されてしまうため animate(width: xxx , height: xxx) も壊れてしまいます。 IE でだとタイミングに寄っては無限にでかくなってしまいます。

対処としては、width で拡大させるのではなく、拡大率パラメータ scale による拡大をさせる方法があります。
css3 だと transform scale=xxx です。scaleは、何倍にするかという指定を取ります ディイフォルトは、scale=1で、1倍です。


修正したソースを貼ります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/master.css">
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="rotate.js"></script>
<script type="text/javascript">
$(function(){

$("#image").hover(function(){
$(this).stop().animate({rotate: 15,scale: 1.2});
},
function() {
$(this).stop().animate({rotate: 0,scale: 1});
});
});
</script>
</head>
<body>
<div class="kaiten&Kakudai" style="left:5px;width:400px;height:250px;">
<div style="position:relative;left:300px;top:100px;" >
<img src="unyu.png" id="image" class="image1" width="100" height="150"> <!-- width か style="width: xx;"等でサイズを指定してください! -->
</a>
</div>
</div>
</body>
</html>

koukikouki 2011/12/20 12:38 rti7743さん

度々ご対応、ご教示頂きまして、
誠に有難うございます。

頂いたソースは、きちんと動作する事を確認致しました。
メールの返信に、ちょっとろくでもない対応方法を記載しましたので、、
もし宜しければ、そちらもご確認いただければと思います。

今後とも、宜しくお願いいたします。

arukari34arukari34 2013/03/08 11:11 rti7743さん

すばらしいプラグインですね!!

ぜひ使わせていただきます!!


そこで本当に申し訳ないのですが;;

ご質問です;

こちらのプラグインを使って、スクロールすると、<div>が回転し、その中の
イメージが回転するようなサイトを制作しております。

このイメージがpngで透過の画像なのですが、最初のリロード時は問題ないのですが、
スクロールして回転が始まったと共にIEで黒い縁取り?みたいな形で画像がかわってしまいます;;

pngのJSなどいろいろと試しましたがだめでした;;

イベントの発生と同時になにかIE独自のフィルターなどかけられていらっしゃるのでしょうか?


お手数をおかけ致しますが、もしよろしければアドバイスを頂けますと幸いです。

aruakri34aruakri34 2013/03/08 11:18 すみません><

自己解決しました!!

ありがとうございます!

最高のプラグインです!

ピヨピヨピヨピヨ 2013/11/11 12:48 利用していましたが、ある日突然、動かなくなり、
上記デモページにアクセスしたところ、閲覧できない状態です。
http://rtilabs.net/files/2011_09_16/rotate.html

大変便利に使わせていただいたのですが、動かなくなった原因わかりますでしょうか。
現在はソースコードをローカルで使用しても動かない状況です。

ピヨピヨピヨピヨ 2013/11/11 12:51 上記、説明が足りませんでした。
当方IE7、IE8で動作しないことを確認しました。
データをDLしたファイルには、上記デモでアップされていたhtmlと同様のものが存在しましたが、
そのデモページの“回転”の箇所動作が、カクカクと斜めに動くだけになりました。

rti7743rti7743 2013/11/11 14:35 経費削減のため rtilabs.net のドメインを失効させました。
代わりにこちでどうぞ。
http://rtilabs.rti-giken.jp/files/2011_09_16/rotate.html

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証