ベストアンサーの方のご回答に挑戦したいのですが、現時点で
もうさっぱりです。m(_ _)m
いったい、何からはじめて いいか?????
jQueryを読み込み
cube.jsを読み込む
↑の時点で、自分の頭は???????です。。。。。
ご教示いただけないでしょうか。 当方Windows7です。
今の時点で、わかっているのは、jQueryというのをダウンロードし
なにかしら するだろうということだけです。
よろしくお願いします。jQueryって いうのは、無料ですよね・・・
もう少し おおまか(ではないかm(_ _)m) ご教示ください。
「javascript のファイルを読み込む」は、HTML に script タグを書く、のと同じ意味です。
<script type="text/javascript" src="スクリプトファイル"></script>
jQuery やら cube.js をダウンロードして、Webサーバから見える位置に置きます。
例えば、HTML ファイルと同じディレクトリにスクリプトのファイルを置いたなら、こんな感じのコードを HTML の head タグの中に書きます。
<head>
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="cube.js"></script>
...
</head>
jQuery は、ダウンロードページから取ってきても良いですが、Google がホスティングしてる(みんなが見える場所に置いて、使って良いよ、って言ってくれてる)ものがあります。
例えば、こんな感じ。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
cube.js の方は、クローバーの画像を使うように変更しなきゃいけないので、↓をブラウザで開いて、保存して使う必要があります。
http://nejimaki-act.com/lab/cube/js/cube.js
「javascript のファイルを読み込む」は、HTML に script タグを書く、のと同じ意味です。
<script type="text/javascript" src="スクリプトファイル"></script>
jQuery やら cube.js をダウンロードして、Webサーバから見える位置に置きます。
例えば、HTML ファイルと同じディレクトリにスクリプトのファイルを置いたなら、こんな感じのコードを HTML の head タグの中に書きます。
<head>
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="cube.js"></script>
...
</head>
jQuery は、ダウンロードページから取ってきても良いですが、Google がホスティングしてる(みんなが見える場所に置いて、使って良いよ、って言ってくれてる)ものがあります。
例えば、こんな感じ。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
cube.js の方は、クローバーの画像を使うように変更しなきゃいけないので、↓をブラウザで開いて、保存して使う必要があります。
http://nejimaki-act.com/lab/cube/js/cube.js
これで、どうか ご容赦ください。
前の質問もそうでしたけど、一週間あるので、ゆっくりと確認して、それから終了すれば良いのに、なんて思いました。
後出しの質問追加が嫌われるときもありますけれど、前の質問は、動かし方を質問しているわけですから、javascript がよく分からないので、組み込み方をもっと噛み砕いて、と言うのは、質問の範疇内だと思いますけどね。
質問を開きっぱなしにしてると、わけの分かんない回答が付くこともありますけど、ポイント配分をしなければ良いだけの話ですし。
うーん…
psne's diary
上記ブログに適当に実装してみました。(そのうち元に戻ります。)
以下をぺたりと貼り付けると「とりあえず」動きます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" > window.onload = function(){ var settings = { interval : 300, // cubeを出す間隔 dur : 30000, // cubeが持続する時間 windowWidth : $(window).width(), windowHeight : $(window).height() } // cubeの最終スタイル設定 var styleFor = { height : 29, // cubeの高さ width : 22, // cubeの幅 'border-width' : 0 // cubeの罫線幅 } // cubeの初期スタイル設定 var styleInit = { position:'absolute', 'z-index' : 1, display : 'inline-block', border : 'solid 0px #eaeaea', height : 29, width : 22, adj : 0, 'background-image' : 'url( "http://q.hatena.ne.jp/images/question/1367919/1367919371_thumbnail.gif")' } var cube = { init : function(){ $('body') .wrapInner('<div style="position:relative;z-index:2">') .append('<div style="position:fixed;top:0;left:0;z-index:1" id="cube-area"></div>'); $('#cube-area').css({ height : settings.windowHeight, width : settings.windowWidth }); styleInit.adj = styleFor['border-width'] + styleFor['width']; }, add : function(){ var initX = cube.getRandomX(); var initY = cube.getRandomY(); var endX = cube.getRandomX(); var endY = cube.getRandomY(); styleFor.left = endX; styleFor.top = endY; $('#cube-area').append($('<div class="block" />') .css(styleInit) // end init .css({ top : initY, left : initX, }) .animate(styleFor,{ easing : 'linear', duration : settings.dur, complete : function(){ $(this).fadeOut(300,function(){ $(this).remove(); }); } } ) ); }, getRandomX : function(){ return Math.floor( Math.random() * settings.windowWidth - styleInit.adj); }, getRandomY : function(){ return Math.floor( Math.random() * settings.windowHeight ); } } // execute cube.init(); setInterval(function(){ cube.add(); },settings.interval); } </script>
http://q.hatena.ne.jp/images/question/1367919/1367919371_thumbnail.gif
という部分を、ご自身のサイトにコピーしたクローバーの画像のURLに書き換える必要があります。
これで、どうか ご容赦ください。
2013/05/08 16:21:14前の質問もそうでしたけど、一週間あるので、ゆっくりと確認して、それから終了すれば良いのに、なんて思いました。
2013/05/08 17:00:50後出しの質問追加が嫌われるときもありますけれど、前の質問は、動かし方を質問しているわけですから、javascript がよく分からないので、組み込み方をもっと噛み砕いて、と言うのは、質問の範疇内だと思いますけどね。
質問を開きっぱなしにしてると、わけの分かんない回答が付くこともありますけど、ポイント配分をしなければ良いだけの話ですし。