心境が複雑２

JavaScript

矢継早にこういう質問って、名前を変えただけの、前回の人のような気がするのは、
俺だけなのだろうか？！これって絶対につながっていると思うんだなぁ〜
でも、自分の勉強のために、時間を見つけては、書こうかなぁ〜。
http://okwave.jp/qa5513884.html

追記。そして途中まで書いた。

さらに追記
（でも、なにげに、どういつじんぶつだよね！）
なぜこれを無視する？
すなおに書けないのか？

<!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>