初めまして。宜しくお願い致します。
javascript超初心者なのですが、
http://www.paulbassett.jp/
上記のページ中央にある物と同じ、背景に写真がある中で、
マウスに合わせてスライドする半透明なバーを作成するには、
どのようにすればよいでしょうか。
作成環境はDreamweaverCS6を使ってHPを制作しております。
誠にお手数ですが、ご教授をお願い致します。
No.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>
No.2
- 回答日時:
何がわからないのかわからないので、一つの考え方の例を。
HTMLで全体のラッパーのなかに、スライドさせるメニュー(ULなど)を半透明で横巾いっぱいに表示させるようにしておきます。
ULはposition:absoluteなどとしておいて、topの値によって上下に表示位置が移動できる仕組みとします。
ここまでは、HTMLとCSSで作成する内容です。
あとは、Javascriptでマウスの位置に応じて、上記のメニュー要素のtopの値を調整してあげれば良さそうです。
反応させたい範囲に対してマウスイベント(mousemoveなど)を設定しておいて、
1)マウスの位置(y座標)を取得
2)メニューの移動目的位置を算出
3)メニューをアニメーションで移動
といった手順で、実現できると思います。
実際には、アニメーション中に目的位置が変わってゆきますので、単純に移動量を定めたアニメーションだとうまくいかないかもしれません。
例えば、イベントハンドラではマウスの位置からメニューの目的位置を計算して変数にセットするようにしておいて、これとは別のアニメーション用関数で常に変数の示す方向へメニューを移動させるようにしておくとか。
移動がないときもアニメーションの関数が走るのは無駄なので、イベントハンドラ側からアニメーションのスイッチを入れるようにしておくのがよろしいかと思います。(目的位置に達したら、アニメーションは自動停止)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- マウス・キーボード real vnc viewer で遠隔先で操作が出来ない。 2 2023/07/24 15:00
- デスクトップパソコン windows11のシステム修復をしたい 3 2022/09/12 11:18
- マウス・キーボード PC画面に表示されているHPなどを上下にスライドさせたい 7 2023/03/17 11:05
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- Excel(エクセル) Excelについて 1 2023/03/06 10:26
- Excel(エクセル) 添付写真上のExcelシートのように時間と曜日ごとに担当者が振り分けられているシートがあります。 例 1 2023/03/08 13:02
- Word(ワード) Word差し込み印刷 QRコードの画像が同じ仕様になる 1 2022/10/28 16:41
- WordPress(ワードプレス) Wordpress 複数プラグインの不具合? 1 2022/10/09 21:52
- MySQL 「utf8mb4_general_ci」はMAMPでは何に当たりますか? 1 2022/06/02 07:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
タブをフリックでスライドでき...
-
JavascriptからPHPへのAjax通信...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
C言語の 配列の中 出力について
-
変数にドットをいれることはか...
-
.txtファイルの読み込み
-
<input>のvalue値をプルダウン...
-
二つのbxsliderをレスポンシブ...
-
Selenium4でボタンをクリックで...
-
Googleマップに複数のピンを立...
-
フレーム内の要素へのXPATHはど...
-
リンク付きの画像をクリックす...
-
Javascriptを使ってQRコード読...
-
プルダウン内容に応じてラジオ...
-
カンマ区切りのデータを配列に...
-
AjaxでSJISファイル読み込みす...
-
Ajaxでフォームデータを連続登...
-
IndexedDB を使ってファイルア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
jqueryでナビゲーションの現在...
-
bxsliderで巻き戻しにする方法
-
要素ごとにイベントが発生させたい
-
選択範囲のリンク URL の抽出
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
-
JavascriptからPHPへのAjax通信...
-
IndexedDB を使ってファイルア...
-
同一ページ移動時ハンバーガー...
-
JavaScriptでtabindexの変更っ...
-
jQueryを使いformでsubmitした...
-
SQLのmaxで求めた値を変数に代...
-
カンマ区切りのデータを配列に...
-
インラインフレームを自動更新...
-
階層別の組織図の自動作成について
-
ドラッグ & ドロップでのド...
-
jQuery toggle() 戻るで開いた...
-
AjaxでJSONを受信すると、文字...
-
jQueryのアコーディオン一番目...
おすすめ情報