jQueryで質問があります。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/12 20:41:33
  • 終了:2011/10/13 22:30:20

ベストアンサー

id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932011/10/13 05:21:20

ポイント33pt

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>

その他の回答(2件)

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932011/10/13 00:58:12

ポイント33pt

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>
id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932011/10/13 05:21:20ここでベストアンサー

ポイント33pt

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>
  • id:tdoi
    他の質問からjQuery自体の使い方を質問されているのではないと思いますが、曖昧すぎて何に困っているかが分かりません。

    数字とは何でしょうか?ユーザがフォームで入力するのでしょうか?
    矢印とは何でしょうか?矢印の画像を表示するのでしょうか?
    アニメーションとは何でしょうか?JavaScriptでアニメーションを実現するのでしょうか?GIFアニメやFlashなどでアニメーションを実現するのでしょうか?

    この辺りが明確になると、参考になる情報も出てくるかと。



  • id:makocan
    jQueryにコダワリはないですが、javascriptでお願いいたします。
    車のメーターのような回転を求めております。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません