- ベストアンサー
画面上で、マウスに反応するスライドバーを作成したい
初めまして。宜しくお願い致します。 javascript超初心者なのですが、 http://www.paulbassett.jp/ 上記のページ中央にある物と同じ、背景に写真がある中で、 マウスに合わせてスライドする半透明なバーを作成するには、 どのようにすればよいでしょうか。 作成環境はDreamweaverCS6を使ってHPを制作しております。 誠にお手数ですが、ご教授をお願い致します。
- oneA
- お礼率29% (9/31)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo2です。 反応がないので、もう見ていないのかもしれないけれど、適当に作ってみたのでご参考にでもなれば… （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- div#mainNavi{ margin-top:200px; width:600px; height:400px; position:relative; background-image:url(./A.jpg); background-color:#eef; } div#mainNavi ul, div#mainNavi li{ margin:0; padding:0; list-style-type:none; } div#mainNavi ul{ width:100%; background-color:#933; position:relative; overflow:hidden; top: 100px; left:0; } div#mainNavi li{ width:100px; color:#fff; padding:0.1em 0; text-align:center; float:left; } //--> </style> </head> <body> <div id="mainNavi"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </div> <script type="text/javascript"> <!-- (function(wrapperId){ var wrapperTop, navi; var maxPos, targetPos = 0; var animation = { intervalId : null, stop : function(){ clearInterval(this.intervalId), this.intervalId = null; }, start : function(){ if(!this.intervalId) this.intervalId = setInterval(function(){ var top = navi.offsetTop; var def = Math.abs(targetPos - top); def = def>6?(Math.sqrt(def)/2 | 0):def>0?1:0; if(top > targetPos) def *= -1; navi.style.top = (top + def) + "px"; if(def==0) animation.stop(); }, 30); } } var init = function(){ var elm = document.getElementById(wrapperId); navi = elm.getElementsByTagName("UL")[0]; maxPos = elm.clientHeight - navi.clientHeight; wrapperTop = 0; while(elm) wrapperTop += elm.offsetTop, elm = elm.offsetParent; } /*@cc_on@*/ var handler = function(evt){ var e = evt./*@if(1)srcElement@else@*/target/*@end@*/; while(e && e.id != wrapperId) e = e.parentNode; if(e){ targetPos = evt./*@if(1)clientY + document.body.scrollTop/*@else@*/pageY/*@end@*/; targetPos = Math.min(targetPos - wrapperTop, maxPos); animation.start(); } } document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'mousemove', handler, false); init(); })("mainNavi"); //--> </script> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
何がわからないのかわからないので、一つの考え方の例を。 HTMLで全体のラッパーのなかに、スライドさせるメニュー（ULなど）を半透明で横巾いっぱいに表示させるようにしておきます。 ULはposition：absoluteなどとしておいて、topの値によって上下に表示位置が移動できる仕組みとします。 ここまでは、HTMLとCSSで作成する内容です。 あとは、Javascriptでマウスの位置に応じて、上記のメニュー要素のtopの値を調整してあげれば良さそうです。 反応させたい範囲に対してマウスイベント（mousemoveなど）を設定しておいて、 1)マウスの位置（y座標）を取得 2)メニューの移動目的位置を算出 3)メニューをアニメーションで移動 といった手順で、実現できると思います。 実際には、アニメーション中に目的位置が変わってゆきますので、単純に移動量を定めたアニメーションだとうまくいかないかもしれません。 例えば、イベントハンドラではマウスの位置からメニューの目的位置を計算して変数にセットするようにしておいて、これとは別のアニメーション用関数で常に変数の示す方向へメニューを移動させるようにしておくとか。 移動がないときもアニメーションの関数が走るのは無駄なので、イベントハンドラ側からアニメーションのスイッチを入れるようにしておくのがよろしいかと思います。(目的位置に達したら、アニメーションは自動停止)
- t_ohta
- ベストアンサー率38% (5253/13739)
記載されているURLのページはJavaScriptではなくFlashを使っていますが、同じ事をJavaScriptで実現したいと言う事でしょうか。
補足
はい。javascriptで表現したいです。flashは用いず、背景写真はjqueryでスライドさせつつ、写真の中のリンクも入った透明なバーを、マウスを乗せたた際の動きに合わせて上下に動かす事が出来たらいいなと思いまして。 ただ、スライドショー中は中のバーが消えてしまう問題も発生中です。。