- ベストアンサー
java scriptだと思うのですが、リンク画像をクリックするとペー
java scriptだと思うのですが、リンク画像をクリックするとページは変わらずに画面全体が右へゆっくりスクロールし、そこに次のリンクが出てくる…といったHPを作りたいのですが、まだまだ初心者の為、記述方法が分かりません。質問内容に不足があるとは思いますが、ご回答お願いいたします。
- WARAKUTEI
- お礼率71% (5/7)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
仕組みはいろいろ考えられると思います。 詳細が不明なので、ごく簡単なサンプル。 ＞画面全体が右へゆっくりスクロールし～ → 『画面の一部』にしていますが、ほぼ似た感じではないかと… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#container { width:600px; overflow:hidden; } div#container .slider { width:800px; height:300px; position:relative; } div#container img { cursor:pointer; width:600px;} div#container .links { list-style-type:none; margin:0; padding:0; width:150px; height:100%; background-color:#ffc; position:absolute; top:0px; left:-200px; } </style> <script type="text/javascript"> <!-- function slide() { var d = document.getElementById("container"); var tid = [], e = d.firstChild; while (e && e.nodeName != "DIV") e = e.nextSibling; if (e) tid[0] = setInterval(slide.set(e, tid), 30); } slide.set = function(obj, id) { var max = 200; var left = parseInt(obj.style.left) || 0; return function() { left +=2, left = left>max?max:left; obj.style.left = left + "px"; if (left>=max) clearInterval(id[0]); } } //--> </script> </head> <body> <div id="container"> <div class="slider"> <p> <img src="A.jpg" onclick="slide()"><br> （↑）クリック<br> </p> <ul class="links"> <li><a href="link1">link1</a></li> <li><a href="link2">link2</a></li> <li><a href="link3">link3</a></li> </ul> </div> </div> </body> </html>
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
×java script ◎javascript まぁどうでもいいか それは http://www.tohoho-web.com/js/window.htm#scroll この辺りかな。いじるのは。 後は色々試してみたら良いよ http://www.google.com/search?hl=ja&q=javascript%20%E8%87%AA%E5%8B%95%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB
お礼
ご回答ありがとうございました。ご紹介いただいたサイトでゆっくり勉強していきたいと思います。
お礼
ありがとうございました。まさにイメージ通りです!!教えていただいたものをベースに、頑張ってみます!本当にありがとうございました