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

http://q.hatena.ne.jp/1367919371#a1200234 のつづきですみません。

ベストアンサーの方のご回答に挑戦したいのですが、現時点で
もうさっぱりです。m(_ _)m
いったい、何からはじめて いいか?????

jQueryを読み込み
cube.jsを読み込む

↑の時点で、自分の頭は???????です。。。。。

ご教示いただけないでしょうか。 当方Windows7です。
今の時点で、わかっているのは、jQueryというのをダウンロードし
なにかしら するだろうということだけです。

よろしくお願いします。jQueryって いうのは、無料ですよね・・・

もう少し おおまか(ではないかm(_ _)m) ご教示ください。

●質問者: meichi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●250ポイント ベストアンサー

「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



追記です。

ぽけっとしすてむ さんが、はてなブログに書いたのと被っちゃいましたが、jsFiddle でサンプルを作ってみました。
cube.js の処理内容をコピペして、クローバーの画像を使うように、ちょこちょこ変えてます。
http://jsfiddle.net/a_kuma3/MbDTy/2/embedded/result/
元の cube.js から、変更した部分には、「★」を付けたコメントを入れてます。


a-kuma3さんのコメント
追記しました。 動きはしますが、しつこくないかどうかは微妙な感じですね...

meichiさんのコメント
ご回答 大変ありがとう ございます。 自宅に帰ってきて、2時から やって やっと ローカルで 動かすことが できました。UNIXでWebサーバは、立ち上げられるんですど(涙) いままで、つくった分は、わけがわかんなくなってしまったん ですが、大変 大変 感謝 しています。 今日は、もう ギブアップです。 また 後日やります。

meichiさんのコメント
すみませんが、これで 質問を終了します。 ポイントは、すみませんが 平等に半分づつでご勘弁ください。

meichiさんのコメント
これで、どうか ご容赦ください。

a-kuma3さんのコメント
前の質問もそうでしたけど、一週間あるので、ゆっくりと確認して、それから終了すれば良いのに、なんて思いました。 後出しの質問追加が嫌われるときもありますけれど、[http://q.hatena.ne.jp/1367919371:title=前の質問]は、動かし方を質問しているわけですから、javascript がよく分からないので、組み込み方をもっと噛み砕いて、と言うのは、質問の範疇内だと思いますけどね。 質問を開きっぱなしにしてると、わけの分かんない回答が付くこともありますけど、ポイント配分をしなければ良いだけの話ですし。

2 ● ぽけっとしすてむ
●200ポイント

うーん…
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に書き換える必要があります。

関連質問

●質問をもっと探す●



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