重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

画面上で、マウスに反応するスライドバーを作成したい

解決済

  • 質問者：oneA
  • 質問日時：
  • 回答数：3件

初めまして。宜しくお願い致します。
javascript超初心者なのですが、
http://www.paulbassett.jp/
上記のページ中央にある物と同じ、背景に写真がある中で、
マウスに合わせてスライドする半透明なバーを作成するには、
どのようにすればよいでしょうか。

作成環境はDreamweaverCS6を使ってHPを制作しております。
誠にお手数ですが、ご教授をお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

何がわからないのかわからないので、一つの考え方の例を。



HTMLで全体のラッパーのなかに、スライドさせるメニュー（ULなど）を半透明で横巾いっぱいに表示させるようにしておきます。
ULはposition：absoluteなどとしておいて、topの値によって上下に表示位置が移動できる仕組みとします。
ここまでは、HTMLとCSSで作成する内容です。

あとは、Javascriptでマウスの位置に応じて、上記のメニュー要素のtopの値を調整してあげれば良さそうです。

反応させたい範囲に対してマウスイベント（mousemoveなど）を設定しておいて、
　1)マウスの位置（y座標）を取得
　2)メニューの移動目的位置を算出
　3)メニューをアニメーションで移動
といった手順で、実現できると思います。

実際には、アニメーション中に目的位置が変わってゆきますので、単純に移動量を定めたアニメーションだとうまくいかないかもしれません。

例えば、イベントハンドラではマウスの位置からメニューの目的位置を計算して変数にセットするようにしておいて、これとは別のアニメーション用関数で常に変数の示す方向へメニューを移動させるようにしておくとか。

移動がないときもアニメーションの関数が走るのは無駄なので、イベントハンドラ側からアニメーションのスイッチを入れるようにしておくのがよろしいかと思います。(目的位置に達したら、アニメーションは自動停止)
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： t_ohta
  • 回答日時：

記載されているURLのページはJavaScriptではなくFlashを使っていますが、同じ事をJavaScriptで実現したいと言う事でしょうか。

この回答への補足

はい。javascriptで表現したいです。flashは用いず、背景写真はjqueryでスライドさせつつ、写真の中のリンクも入った透明なバーを、マウスを乗せたた際の動きに合わせて上下に動かす事が出来たらいいなと思いまして。
ただ、スライドショー中は中のバーが消えてしまう問題も発生中です。。

補足日時：2012/12/01 11:15
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報