リンクした画像が、スライド(ランダム方向)とフェードインしながら切り替わるスクリプト
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> ul { width: 400px; height: 200px; list-style: none; border:1px #888 solid; overflow: auto; margin: 0; padding : 0; } li a img { border : 0px none; width : 400px; height : 200px; } </style> <body> <ul id="menu"> <li><a href="#"><img src="./img/0.gif" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <ul id="menu2"> <li><a href="#"><img src="./img/0.gif" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" alt="*"></a></li> </ul> <script type="text/javascript"> //@cc_on var AutoChanger = function () { this.init.apply( this, arguments ); }; AutoChanger.prototype.init = function ( targetId, interval, step, interval2 ) { var e = document.getElementById( targetId ); var cnt, o, s; if( !e ) return false; e.style.overflow = 'hidden'; e.style.position = 'relative'; this.e = e; this.interval = interval || 3000; this.step = step || 20; this.interval2 = interval2 || 50; this.timerId = null; this.o = 100 / this.step; for( cnt = 0; o = e.childNodes[ cnt ]; ) { if( 1 == o.nodeType && 'LI' === o.nodeName ) { s = o.style; s.position = 'absolute'; s.top = '0px'; s.left = '0px'; cnt++; } else e.removeChild( o ); } this.max = cnt; this.wait(); }; AutoChanger.prototype.wait = function() { timerId = setTimeout( (function ( that ) { return function ( ) { that.change(); }; })( this ), this.interval ); }; AutoChanger.prototype.change = function () { var r = Math.floor( Math.random() * 4 ); this.sx = [ 0, this.e.clientWidth, 0, -this.e.clientWidth ][ r ]; this.sy = [ -this.e.clientHeight, 0, this.e.clientHeight, 0 ][ r ]; this.vx = -this.sx / this.step; this.vy = -this.sy / this.step; this.cnt = this.step; this.op = 0; this.target = this.e.firstChild; this.loop(); this.e.appendChild( this.e.firstChild ); this.target = this.e.lastChild; this.start(); }; AutoChanger.prototype.start = function ( ) { this.timerId = setInterval( (function ( that ) { return function ( ) { that.loop(); }; })( this ), this.interval2 ); }; AutoChanger.prototype.stop = function ( ) { this.timerId && clearInterval( this.timerId ); this.timerId && clearTimeout( this.timerId ); this.timerId = null; }; AutoChanger.prototype.loop = function ( ) { var s = this.target.style; s.top = (this.sy | 0) + 'px'; s.left = (this.sx | 0) + 'px'; s./*@if(1) filter = 'alpha(opacity='+ this.op +')' @else@*/ opacity = (this.op / 100) /*@end@*/; if( 0 == this.cnt-- ) { this.stop(); this.wait(); return; } if( this.cnt ) { this.sx += this.vx; this.sy += this.vy; this.op += this.o; } else { this.op = 100; this.sx = 0; this.sy = 0; } }; new AutoChanger( 'menu' ); new AutoChanger( 'menu2' ); </script> </body> </html>
個人的な感想。
数年前、これをJavaScriptで実現するのが夢だった。
OKWaveの質問に答えながら、勉強してやっとここまで出来るようになったみたい。
もっと頑張れ〜!俺。
追記
でも、コードを書くことで、腕は上がると思うけど、それはやっぱり良質なコードを書く手本があってのこと。そこはやっぱりTAG indexのJavaScriptのBBSです。
それにしても、ここに集まってくる、つわものと思われる方々は、どういう人たちなのだろう?世の中には、こういう人がゴロゴロいるってこと?