人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryで質問があります。
数字によって、矢印の角度を変えるアニメーションを作りたいと思いますが
何か、参考にできるサイトなどはありませんでしょうか?


●質問者: makocan
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●34ポイント

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

http://blog.verygoodtown.com/2010/02/css3-html-rotation-jquery-plugin-animate-css-rotation-and-scale/


とか、


http://code.google.com/p/jqueryrotate/


って感じでしょうか?


2 ● Cherenkov
●33ポイント

jqueryrotatejQuery UIのSliderを使ってサンプルを書いてみました。

http://jsfiddle.net/qsxdC/


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.2.1.js"></script>
<script>
$(function(){
$("#slider").slider({
 min: 0,
 max: 360,
 step: 1,
 slide: function(event, ui) {
 $("#arrow").rotate(ui.value);
 }
});
});
</script>
</head>
<body>
<br><br>
<div class="demo">
<div id="slider"></div>
</div>
<img id="arrow" src="http://www.hatena.ne.jp/images/badge-q-hover.gif">
</body>
</html>

3 ● Cherenkov
●33ポイント ベストアンサー

jqueryrotateを使ったサンプル


http://jsfiddle.net/4ejuS/

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.2.1.js"></script>
<script>
$(function(){
 $('#num').keyup(function() {
 $("#arrow").rotate(parseInt(this.value));
 });
});
</script>
</head>
<body>
<div>数字を入力すると回転</div>
<input type="number" id="num" style="ime-mode:disabled">
<br><br>
<div>
<img id="arrow" src="http://www.hatena.ne.jp/images/badge-q-hover.gif">
</div>
</body>
</html>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ