- 締切済み
左から右へ変更する場合はどこを変更したらいいでしょ
下記のURLをみたのですが、 javaにて左から右へ移動という変更をしたいです。 どこを変更すれば可能でしょうか。 http://okwave.jp/qa/q5206671_2.html#answer
- dfawsefawea
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数10
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="utf-8"> <title>動かすぞぉ～</title> <style> .menu { margin: 1em; width:600px; height:100px; } .menu li { display: inline; } .menu li a img { border: 0px none; } </style> <body> <ul id="menu0" class="menu"> <li><a href="#"><img src="./img/0.gif" width="20" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" width="40" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" width="60" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" width="80" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" width="100" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/6.gif" width="120" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/7.gif" width="140" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/8.gif" width="160" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/9.gif" width="180" height="100" alt="*"></a></li> </ul> <ul id="menu1" class="menu"> <li><a href="#"><img src="./img/0.gif" width="20" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/1.gif" width="40" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/2.gif" width="60" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/3.gif" width="80" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/4.gif" width="100" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/6.gif" width="120" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/7.gif" width="140" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/8.gif" width="160" height="100" alt="*"></a></li> <li><a href="#"><img src="./img/9.gif" width="180" height="100" alt="*"></a></li> </ul> <script> mover (document.getElementById ('menu0'), true, 2, 50); mover (document.getElementById ('menu1'), false, 2, 50); function mover (target, direction, step, interval) { var i, es, e, p, s; var x = []; var w = target.offsetWidth; init: { es = target.childNodes; direction = !! direction; step *= direction ? 1: -1; s = target.style; s.position = 'relative'; s.listStyle = 'none'; s.padding = '0'; s.overflow = 'hidden'; for (i = p = 0; e = es[i]; ) { if ('LI' === e.nodeName) { s = e.style; s.position = 'absolute'; s.left = p + 'px'; p += e.offsetWidth; i++; } else target.removeChild (e); } } function loop () { var es = target.childNodes; var i, e, last; for (i = 0; e = es[i]; i++) { e.style.left = parseInt (e.style.left) + step + 'px'; last = e; } e = es[0]; if (direction) if (0 < parseInt (e.style.left)) target.insertBefore (last, e).style.left = parseInt (e.style.left) - last.offsetWidth + 'px'; else ; else if (parseInt (es[1].style.left) <= 0) target.appendChild (e).style.left = parseInt (last.style.left) + last.offsetWidth + 'px'; } loop (); setInterval (loop, interval); } </script>
