JavaScript + Ajax 実践サンプル集 - jQueryのSpritelyプラグインでフラッシュのようにアニメーション化する

jQueryのSpritelyプラグインでフラッシュのようにアニメーション化する

説明コード関連書籍コメント投稿

このサンプルは、CSSとjQueryの Spritely プラグインを利用してイメージをフラッシュのようにアニメーション化します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Spritely Example </title>
  <link href="jQuery/spritely/demo.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="jQuery/spritely/jquery.spritely-0.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function ($) {
      $(document).ready(function () {

$('#city1').pan({ fps: 30, speed: 1, dir: 'right' });

$('#city2').pan({ fps: 30, speed: 2, dir: 'right' });

$('#sky').pan({ fps: 30, speed: 0.5, dir: 'right' });

var stage_left = (($('body').width() - 866) / 2);
        var stage_top = 30;

$('#plane1').sprite({ fps: 8, no_of_frames: 14 })
					.spRandom({
					  top: 40,
					  left: stage_left + 20,
					  right: 400,
					  bottom: 140,
					  speed: 3500,
					  pause: 1000
					});

});
    })(jQuery);
	</script>
</head>
<body>  
  <div id="sky" style="z-index:999;"></div>  
  <div id="city1" style="z-index:999;"></div>
  <div id="city2" style="z-index:999;"></div>
  <div id="layer1" style="z-index:999;"></div>
  <div id="plane1" style="z-index:999;"></div>
  <br>
  <div id="content" style="z-index:999;">
    <div id="leftcontent" style="z-index:999;">
      <div id="rightcontent" style="z-index:999;"></div>
    </div>
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryのSpritelyプラグインでフラッシュのようにアニメーション化する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryのSpritelyプラグインでフラッシュのようにアニメーション化する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!