ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

マクドナルド
http://www.mcdonalds.co.jp/

インターデコハウスの住宅
http://www.idh.co.jp/style/

ソニー
http://www.sony.co.jp/

のようなとても動きのあるホームページを作りたいです。

私が分かるもの
『XHTMLとCSS』はだいたい
『Javascript』は部分部分

上記のホームページのような動きを実現するには
Javascriptだけでできるんですよね??

こういったプログラムを作るために勉強をしたいのですが、
どのように勉強をしたらいいのか分かりません。
学校に通うなど余裕がないため
おすすめサイトや本がありましたら教えて下さい。

私が使えるJavascriptのレベルは↓を一通りやったところです。

~ JavaScript ~
JavaScript入門
http://www.ajaxtower.jp/js/

JavaScriptサンプル集
http://plusone.jpn.org/javascript/sample1.html

イヌでもわかるJavaScript講座
http://www.red.oit-net.jp/tatsuya/java/index.htm

初心者のためのJavaScript講座
http://www.pori2.net/js/

jQueryもちょっとだけ…
~ jQuery ~
jQuery入門 (ver 1.3)
http://www.openspc2.org/JavaScript/Ajax/jQuery_s …

お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

ソニーのはJavaScriptですけど、Flashでも考え方は同じです。




参考にされているサイトでは、

初心者のためのJavaScript講座
位置の指定2
http://www.pori2.net/js/DOM/10.html

この一番下に書かれているとおり、
タイマーを使うとアニメーション出来ます。


考え方としてはそれだけです。
どのタイミングで、どのタイマーを使うか(どの位置を指定するか)という制御だけです。

タイマーの制御は自前で作らずに、アニメーションライブラリがよく使われます。
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:26

さがせばここにも、過去問答のなかにあるよ



みどるれべるよりちょっと下くらいか!?
http://oshiete.goo.ne.jp/qa/5513884.html
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:26

一応、どのサイトもflashも使ってますね

    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:25

そこまで出来てFlashを知らないなんて事は無いですよね?


http://e-words.jp/w/Flash.html
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:25

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像のランダムチェンジとフェードイン効果

質問ですが、まず最初に失礼がありましたらお許し下さい。
​http://oshiete1.goo.ne.jp/qa3495988.html​ での質問に関連していると思うので、例を引用させて頂きます。
横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を6個にしての設置を行います。横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたい・・
ここまでは回答で納得したのですが、メイン画像を一定時間でランダムチェンジさせる事とメイン画像の変化時にフェードイン効果を与える事の2点に挌闘しています。過去の質問ログを全部調べましたが、ないものですね。

<html>
<head>
<title></title>
<style type="text/css">
img{border:1px solid red;}
#box0 {
width:770px;
height:300px;
position:relative;
}
#box mainview{
position:absolute;
top:0;left:0;
}
#box0 ul{
position:absolute;
top:0;left:590px;
list-style-type:none;
margin:0;
padding:0;
}
#box0 li{
margin:0;
padding:0;
}
#box0 li img{
vertical-align:top;
}
</style>
<script type="text/javascript">
function sample(obj,mode){
var images = obj.getElementsByTagName('img');
images[0].style.display = (mode)?'none':'inline';
images[1].style.display = (mode)?'inline':'none';
var idNo = images[0].id.match(/(\d)/);
for(var x=document.getElementById('mainview').firstChild;
x;x=x.nextSibling){
if(x.id){
if(!mode && x.id.match(/0/) || mode && x.id.match(idNo[1]))
x.style.display = 'inline';
else
x.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="box0">
<span id="mainview">
<img src="xxx0" width="590" height="180" alt="xxx0" id="xxx0">
<img src="xxx1" width="590" height="180" alt="xxx1" id="xxx1" style="display:none;">
<img src="xxx2" width="590" height="180" alt="xxx2" id="xxx2" style="display:none;">
<img src="xxx3" width="590" height="180" alt="xxx3" id="xxx3" style="display:none;">
<img src="xxx4" width="590" height="180" alt="xxx4" id="xxx4" style="display:none;">
<img src="xxx5" width="590" height="180" alt="xxx5" id="xxx5" style="display:none;">
<img src="xxx6" width="590" height="180" alt="xxx6" id="xxx6" style="display:none;">
</span>
<ul>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy1" width="180" height="50" alt="yyy1" id="yyy1"><img src="zzz1" width="180" height="50" alt="zzz1" id="zzz1" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy2" width="180" height="50" alt="yyy2" id="yyy2"><img src="zzz2" width="180" height="50" alt="zzz2" id="zzz2" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy3" width="180" height="50" alt="yyy3" id="yyy3"><img src="zzz3" width="180" height="50" alt="zzz3" id="zzz3" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy4" width="180" height="50" alt="yyy4" id="yyy4"><img src="zzz4" width="180" height="50" alt="zzz4" id="zzz4" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy5" width="180" height="50" alt="yyy5" id="yyy5"><img src="zzz5" width="180" height="50" alt="zzz5" id="zzz5" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy6" width="180" height="50" alt="yyy6" id="yyy6"><img src="zzz6" width="180" height="50" alt="zzz6" id="zzz6" style="display:none"></a></li>
</ul>
</div>
</body>
</html>
の中に何を追加すれば・・・
ご教授の程よろしくお願いします。

質問ですが、まず最初に失礼がありましたらお許し下さい。
​http://oshiete1.goo.ne.jp/qa3495988.html​ での質問に関連していると思うので、例を引用させて頂きます。
横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を6個にしての設置を行います。横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたい・・
ここまでは回答で納得したのですが、メイン画像を一定時間でランダムチェンジさせる事とメイン画像の変化時にフェ...続きを読む

Aベストアンサー

とちゅうけいかです。おもったよりめんどうだね~やっぱり・・。
fujillinさんのように、みじかくかければよいのですが、むりっぽ。
ひととおりできたら、おなじような、きのうをまとめれば、たしょう
みじかくなるかも?
ぜんかくくうはくは、はんかくに。
(でも、なにげに、どういつじんぶつだよね!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
#MainMenu {
 width :680px;
 height: 300px;
 overflow:auto;
}

#MainMenu ul {
 float :left;
 list-style: none;
 overflow : auto;
 margin : 0;
 padding : 0;
 height : 300px;
}

#MainView {
 width : 500px;
}

#MainView li {
 margin : 0;
 padding : 0;
 height : 300px;
}

#MainView li img {
 width:500px;
 height:300px;
 border : 0px none;
}

#ItemList {
 list-style: none;
 width : 180px;
}

#ItemList li {
 width : 180px;
 height: 50px;
}
#ItemList li a {
 width : 180px;
 height: 50px;
}

#ItemList li a img {
 width : 180px;
 height: 50px;
 border: 0px none;
}

</style>

</head>
<body>
<div id="MainMenu">

 <ul id="MainView">
  <li><img src="./img/0.gif" alt="xxx0">
  <li><img src="./img/1.gif" alt="xxx1">
  <li><img src="./img/2.gif" alt="xxx2">
  <li><img src="./img/3.gif" alt="xxx3">
  <li><img src="./img/4.gif" alt="xxx4">
  <li><img src="./img/5.gif" alt="xxx5">
  <li><img src="./img/6.gif" alt="xxx6">
 </ul>

 <ul id="ItemList">
  <li>
   <a href="#">
    <img src="./img/y0.gif" alt="yyy0">
   </a>

  <li>
   <a href="#">
    <img src="./img/y1.gif" alt="yyy1">
   </a>

  <li>
   <a href="#">
    <img src="./img/y2.gif" alt="yyy2">
   </a>

  <li>
   <a href="#">
    <img src="./img/y3.gif" alt="yyy3">
   </a>

  <li>
   <a href="#">
    <img src="./img/y4.gif" alt="yyy4">
   </a>

  <li>
   <a href="#">
    <img src="./img/y5.gif" alt="yyy5">
   </a>

  <li>
   <a href="#">
    <img src="./img/y6.gif" alt="yyy6">
   </a>
 </ul>
</div>

<script type="text/javascript">
//@cc_on

var Locater = function ( x, y, a ) {
 if( 'number' === typeof x ) this.left = (x|0) + 'px';
 if( 'number' === typeof y ) this.top = (y|0) + 'px';
 if( 'number' === typeof a ) {
  this./*@if( @_jscript ) filter = 'alpha(opacity='+ a +')' @else@*/
  opacity = ( a / 100 ) + '' /*@end@*/;
 }
};
//__________

var AutoChanger = function () {
 this.init.apply( this, arguments );
};

AutoChanger.prototype.init = function ( targetId, interval, step, interval2 ) {
 var cnt = 0, o, s, e;

 if( this.e = e = document.getElementById( targetId ) ) {
  e.style.overflow = 'hidden';
  e.style.position = 'relative';
  
  this.interval = interval || 3000;
  this.step = step || 20;
  this.interval2 = interval2 || 50;
  this.timerId0 = null;
  this.timerId1 = null;
  this.o = 100 / this.step;
  this.sx = [ 0, e.clientWidth, 0, -e.clientWidth ];
  this.sy = [ -e.clientHeight, 0, e.clientHeight, 0 ];
  this.li = [ ];
  this.pt = 0;
  
  while( o = e.childNodes[ cnt ] ) {
   if( 1 == o.nodeType && 'LI' === o.nodeName ) {
    s = o.style;
    s.position = 'absolute';// Locater.call( s, 0, 0, 100)
    cnt++;
    this.li.push( o );
   } else
    e.removeChild( o );
  }
  this.target = e.firstChild;
  this.wait();
 }
};


AutoChanger.prototype.wait = function() {
 this.timerId0 = setTimeout( (function ( that ) {
  return function ( ) { that.change(); }; })( this ), this.interval );
};


AutoChanger.prototype.change = function ( n, r ) {
 this.stop();
 Locater.call( this.target.style, 0, 0, 100 );
 r = 'undefined' === typeof r ? Math.floor( Math.random() * 4 ): r % 4;
 this.x = this.sx[ r ];
 this.y = this.sy[ r ];
 this.vx = -this.x / this.step;
 this.vy = -this.y / this.step;
 this.cnt = this.step;
 this.op = 0;
 this.pt =( ( 'number' === typeof n ) ? n: this.pt + 1 ) % this.li.length;
 this.target = this.li[ this.pt ];
 Locater.call( this.target.style, this.x, this.y, this.op );

 this.e.appendChild( this.target );
 this.start();
};


AutoChanger.prototype.start = function ( ) {
 this.timerId1 = setInterval( (function ( that ) {
  return function ( ) {
   that.x += that.vx, that.y += that.vy, that.op += that.o;
   Locater.call( that.target.style, that.x, that.y, that.op );
   if( --that.cnt == 0 ) that.stop(), that.wait();
  };
 })( this ), this.interval2 );
};


AutoChanger.prototype.stop = function ( ) {
 this.timerId0 && clearTimeout( this.timerId0 ); this.timerId0 = null;
 this.timerId1 && clearInterval( this.timerId1 ); this.timerId1 = null;
};


//__________


var ItemListRoller = function ( ) {
 this.init.apply( this, arguments );
};


ItemListRoller.prototype.init = function ( targetId, step, interval ) {
 var e = document.getElementById( targetId );
 var cnt, o, s, h = 0;
 if( 'UL' != e.nodeName ) return false;
 
 e.style.overflow = 'hidden';
 e.style.position = 'relative';
 
 this.e = e;
 this.step = step || 2;
 this.interval = interval || 40;
 this.timerId = null;
 
 for( cnt = 0; o = e.childNodes[ cnt ]; ) {
  if( 1 == o.nodeType && 'LI' === o.nodeName ) {
   s = o.style;
   s.position = 'absolute';
   s.top = h + 'px';
   cnt++;
   h += o.offsetHeight;
  } else
   e.removeChild( o );
 }
 this.max = h;
 this.lis = e.childNodes;
 this.start();
};


ItemListRoller.prototype.start = function ( ) {
 this.timerId = setInterval( (function ( that ) {
  return function ( ) {
   that.roll();
  };
 })( this ), this.interval );
};


ItemListRoller.prototype.stop = function ( ) {
 this.timerId && clearInterval( this.timerId );
 this.timerId = null;
};


ItemListRoller.prototype.roll = function ( ) {
 var cnt = 0;
 var li;
 var s;
 var h;
 
 while( li = this.lis[ cnt++ ] ) {
  s = li.style;
  h = parseInt( s.top, 10) - this.step;
  if( -li.offsetHeight >= h )
   h = this.max - li.offsetHeight;
  s.top = h + 'px';
 }
};



ItemListRoller.Listener = (function ( getParent, getCount ) {
 var m, n;
 return function ( evt ) {
  var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
  var p = getParent( e, 'nodeName', 'UL' );
  if( !p || !this.memory[ p.id ]) {
   if( m ) m.obj.start();
   m = null;
   return;
  }
  var c;
  var changer;
  
  if( p && (m = changer = this.memory[ p.id ]) ) {
   c = getCount( getParent( e, 'nodeName', 'LI' ) );
   changer.obj.stop();
   if(c>=0) changer.cbFunc.call( changer.cbObj, c );
  }
 };
})(
  function ( node, type, val ) {
   return node ? (val == node[type]) ? node: arguments.callee( node.parentNode, type, val ): null;
  },
  function ( node ) {
   var cnt = -1, n;
   if( node ) {
    cnt = 0;
    n = node.nodeName;
    while( node = node.previousSibling )
     if( n == node.nodeName ) cnt++;
   }
   return cnt;
  }
 );

ItemListRoller.memory = [ ];

ItemListRoller.Initializer = function ( ) {
 document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
  'mouseover', function (e) { ItemListRoller.Listener(e); }, false );
};

ItemListRoller.add = function ( targetUL, step, interval, cbFunc, cbObj ) {
 var e = document.getElementById( targetUL );
 var o;
 if( 1 != e.nodeType || 'UL' !== e.nodeName ) return;
 if( ! this.memory[ targetUL ] ) {
  o = new this( targetUL, step, interval );
 }
 this.memory[ targetUL ] = { 'id': targetUL, 'cbFunc': cbFunc, 'cbObj': cbObj, 'obj': o };
};
//__________

var ac = new AutoChanger( 'MainView' );
ItemListRoller.Initializer( );
ItemListRoller.add( 'ItemList', 1, 60, ac.change, ac );
</script>

</body>
</html>

とちゅうけいかです。おもったよりめんどうだね~やっぱり・・。
fujillinさんのように、みじかくかければよいのですが、むりっぽ。
ひととおりできたら、おなじような、きのうをまとめれば、たしょう
みじかくなるかも?
ぜんかくくうはくは、はんかくに。
(でも、なにげに、どういつじんぶつだよね!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
#MainMenu {
 width :680px;
 height: 300px;
 overflow:auto;
}

#MainMenu ul {
...続きを読む


人気Q&Aランキング