• 締切済み

スクロールバーの位置に合わせて画像を移動

縦のスクロールバーの位置に合わせて画像を移動したいです。 マウスの位置に合わせて移動させる事は可能なのですが、すぐ動いたしまうので。。 一応、マウスの位置に合わせて移動は下記のようにしています(元々、縦横方向の移動を紹介しているページがあったのでそれを拝借して縦方向の移動だけにしています。) <script language="JavaScript"> <!-- mov_value=3; y_add=0; y_cur=0; y_pos=0; y_dotti=0; my_time=0; pos=0; function judge_pos(e){ if(document.layers){y_pos=e.pageY;} if(document.all){ y_pos=document.body.scrollTop+event.clientY; } if(y_cur<=y_pos)y_dotti=1; else y_dotti=0; disp(); } function disp(){ if(pos==0){pos=1; y_cur=y_pos;} if(y_dotti==1 && y_cur<=y_pos+y_add)y_cur+=mov_value; else if(y_dotti==0 && y_cur>=y_pos+y_add)y_cur-=mov_value; if(document.layers){ document.layers["lay0"].moveTo(y_cur); document.layers["lay0"].visibility='show'; } if(document.all){ document.all("lay0").style.pixelTop=y_cur; document.all("lay0").style.visibility='visible'; } if(y_dotti==1 && y_cur<=y_pos+y_add){ clearTimeout(my_time); my_time=setTimeout('disp();',20); } else if(y_dotti==0 && y_cur>=y_pos+y_add){ clearTimeout(my_time); my_time=setTimeout('disp();',20); } else { y_cur=y_pos; } return false; } if(document.layers)document.captureEvents(Event.MOUSEMOVE); document.onmousemove=judge_pos; //--> </script>

みんなの回答

回答No.2

・javascriptなら エレメント.style.position = fixed; ・スタイルシートなら #エレメントのID{ position: fixed; } かな?

  • N0_Thx
  • ベストアンサー率15% (6/40)
回答No.1

position: fixed;じゃだめなんか? これでスクロール位置に合わせて画像が移動するぞ? 教えて?No_Thx☆彡

yuni3022
質問者

補足

position: fixed;で出来そうですがそれをどこに記載すれば良いのかいまいち分かりません。 position: fixed;で探すと難しいのばかりで。

関連するQ&A

  • JavaScriptでセンター表示で行き詰まってしまいました。

    JavaScriptでセンター表示で行き詰まってしまいました。 どうしてもできません。 現在しようとしているのが、HP全面に画像を表示させ、 そのセンターに日時時間を表示させたいと思っています。 いろいろwebで調べて、センター表示ではないのですが、 下記の形を組み込みました。 IEとsafariでは問題無いのですが、Firefoxでは、画面の左上端に表示されてしまいます。 どなたか、ご教授いただければ助かります! また常に画面のセンター表示も可能なのでしょうか? ↓↓↓↓↓head内 <script language="JavaScript"> <!--// my_width=250; x_iti=450; y_iti=350; function tokei() { a=new Date(); b=a.getFullYear(); c=a.getMonth(); d=a.getDate(); e=a.getHours(); f=a.getMinutes(); g=a.getSeconds(); if(c<10)c="0"+c; if(d<10)d="0"+d; if(e<10)e="0"+e; if(f<10)f="0"+f; if(g<10)g="0"+g; moji="<strong>"+b+"."+c+"."+d+" "+e+":"+f+":"+g+"</strong>"; if(document.layers) { document.layers["lay0"].moveTo(x_iti,y_iti); document.layers["lay0"].clip.width=my_width; document.layers["lay0"].document.open(); document.layers["lay0"].document.write(moji); document.layers["lay0"].document.close(); } else if((document.getElementById) && (!document.all)) { document.getElementById("lay0").style.pixelLeft=x_iti; document.getElementById("lay0").style.pixelTop=y_iti; document.getElementById("lay0").innerHTML=moji; document.getElementById("lay0").style.width=my_width; } else if(document.all) { document.all("lay0").style.pixelLeft=x_iti; document.all("lay0").style.pixelTop=y_iti; document.all("lay0").innerHTML=moji; document.all("lay0").style.width=my_width; } clearTimeout(g); g=setTimeout('tokei()',1000); } //--> </script> ↓↓↓↓↓body内 <body onLoad="tokei();"> <span id="lay0" style="position:absolute;visibility:visible;color:#FFFFFF"></span>

  • スクロール位置を中央にしたい

    こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 function getScroll(){ var x, y; if(document.all !== void 0){ // IE4, IE5, IE6 x = document.body.scrollLeft; y = document.body.scrollTop; }else if(document.layers !== void 0 || (navigator.userAgent.indexOf("Opera") != -1 || window.opera !== void 0)){ // NN4, Opera6 x = window.pageXOffset; y = window.pageYOffset; }else if(navigator.userAgent.indexOf("Gecko") != -1){ // NS6, Mozilla x = window.scrollX; y = window.scrollY; }else{ x = y = 0; } return {x: x, y: y}; } // スクロール始めのスクロール量 var SCROLL ; var divCountScroller = 50 ; // 分割数 // 現在のスクロール位置から、指定座標までスクロールします function scroller( x, y, count ){ if( count === void 0 ){ count = 0 ; SCROLL = getScroll(); } if( count++ < divCountScroller ){ var c = count/divCountScroller ; var nx = SCROLL.x+( x-SCROLL.x )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); var ny = SCROLL.y+( y-SCROLL.y )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); window.scrollTo( nx, ny ); setTimeout( "scroller("+x+","+y+","+count+");", 30 ); } }

  • 初期画像にレイヤーが出てしまう

    HPにレイヤー設定をしたところ、画像を開けるとすぐレイヤーが出てしまいます。しかし、その画像でマウスを重ねたり外したりすれば、問題なく作動します。その後、HPを開けると、また最初だけレイヤーが表示されてしまいます。どのようにしたら、最初の画面で表示されないようになるでしょうか?よろしくお願い致します。 次のように設定しています。 <script language="JavaScript"> <!--//レイヤー表示 function Lay_View(name,sw) { if (document.all) { //IE用 document.all[name].style.visibility=sw; } else if (document.layers) { //NC用 document.layers[name].visibility=sw; } } //--> </script> <div id="ABC" style="position:absolute; width:350px; height:30px; z-index:1; left: 80px; top: 210px">あいうえお</div> <a href="index1.html"onMouseOver="Lay_View('ABC','visible');"onMouseOut="Lay_View('ABC','hidden');">AIUEO</a> これだけです。何か足りないでしょうか?

  • レイヤーのクリッピングを解除するにはどうすれば良いですか

    難しい内容かもしれませんが、宜しくお願いします。 IE4 や NN4 で例えば以下の様に、 'lay'という名前のレイヤーを作成したとします。 <DIV ID='lay' STYLE='position:absolute'></DIV> すると以下の様に、JavaScriptから文字列 htm をレイヤーに書き込めます。 //IEの場合 document.all('lay').innerHTML=htm; //NNの場合 document.layers['lay'].document.open(); document.layers['lay'].document.write(htm); document.layers['lay'].document.close(); そしてレイヤーのサイズも文字列 htm の内容に合わせて変化します。 しかし以下の様に、1度でもレイヤーをクリッピングした後に、 //IEの場合 document.all('lay').style.width=100; document.all('lay').style.height=100; document.all('lay').style.clip='rect(0,100,100,0)'; //NNの場合 document.layers['lay'].clip.left=0; document.layers['lay'].clip.right=100; document.layers['lay'].clip.bottom=100; document.layers['lay'].clip.top=0; このレイヤーをクリッピングする前の、 文字列 htm の内容に合わせてサイズが変化していた頃の状態に、 戻す方法が分からなくて困っております。 やっぱり無理でしょうか。 何の回答もないとサミシイので、わからなくても誰か返事してあげて下さい。

  • ホームページ作成ソフトで作ると実行されない

    まったくの初心者で申し訳ないのですが、何がおかしいのかわからないので質問させていただきます。 ジャバスクリプトで縦に長いページなどにある、 スクロールさせるとメニューが一緒に降りてくるスクリプトの 公開ソースを見つけてコピーして使おうと思っていたのですが、 ホームページビルダー3.0で.htmlを作ると実行されず、 まったく同じソースをメモ帳に貼り付けて.htmlにすると 実行されます。 まったく同じソースを使っているはずなのに、 かたや実行され、かたや実行されずの違いがわかりません。 ●元のソース(メモ帳作.htmlも同様です) <HTML> <HEAD> <script> // レイアの最初の横位置 def_left = 10; // レイアの最初の縦位置 def_top = 100; function init() { N4 = IE = GK = 0; if (document.layers) { N4 ++; obj = document.layers["lay"]; } else if (document.all) { IE ++; obj = document.all("lay").style; } else if (document.getElementById) { GK ++; obj = document.getElementById("lay").style; } with (obj) { left = def_left; top = def_top; } lay_ud(); } function lay_ud() { if (N4) y = pageYOffset + def_top; if (IE) y = document.body.scrollTop + def_top; if (GK) y = window.pageYOffset + def_top; obj.top = y; setTimeout("lay_ud()",0); } onload = init; </script> <TITLE></TITLE> </HEAD> <BODY> <div id=lay style="position:absolute;"> <table bgcolor=#9999ff border cellpadding=10><td> <font color=#ffffff> このレイアは、<br> ウィンドウが<br> スクロールされても<br> 常にこの位置に<br> 表示されます </font> </td></table> </div> <BR><BR><BR><BR><BR> スクロールさせてみて下さい ↓ <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </BODY> </HTML> ●上記ソースをそのまま貼り付けただけの  HPBで保存したもの <!DOCTYPE HTML PUBLIC "-//IBM//DTD HPB HTML//EN"> <HTML> <HEAD> <META name="GENERATOR" content="IBM HomePage Builder V3.0 for Windows"> <SCRIPT> // レイアの最初の横位置 def_left = 10; // レイアの最初の縦位置 def_top = 100; function init() { N4 = IE = GK = 0; if (document.layers) { N4 ++; obj = document.layers["lay"]; } else if (document.all) { IE ++; obj = document.all("lay").style; } else if (document.getElementById) { GK ++; obj = document.getElementById("lay").style; } with (obj) { left = def_left; top = def_top; } lay_ud(); } function lay_ud() { if (N4) y = pageYOffset + def_top; if (IE) y = document.body.scrollTop + def_top; if (GK) y = window.pageYOffset + def_top; obj.top = y; setTimeout("lay_ud()",0); } onload = init; </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <DIV id="lay" style="position:absolute;"> <TABLE border="1" cellpadding="10" bgcolor="#9999ff"> <TR> <TD><FONT color="#ffffff"> このレイアは、<BR> ウィンドウが<BR> スクロールされても<BR> 常にこの位置に<BR> 表示されます </FONT></TD></TR> </TABLE> </DIV> <P> <BR> <BR> <BR> <BR> <BR> スクロールさせてみて下さい ↓<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> </P> </BODY> </HTML> 微妙に違うのはわかるのですが、 勝手に変わってしまうのをどうすればいいかがわからず困っています。 つまらない質問で申し訳ないですが どうぞよろしくお願い致します。

  • XHTMLとJavascript・CSSで表示位置の固定方法について

    HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 Javascriptを別ファイルにしても動きませんでした。 修正方法、もしくは代替案をお願いします。 宜しくお願いいたします <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>

  • これは何をするスクリプトですか?

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

  • マウスオンで説明文をページの真ん中に表示させたい!

    よろしくお願いします。 http://www4.ocn.ne.jp/~tomotan/tagpractice.html (↑)このサイトで <HTML> <HEAD> <SCRIPT><!-- function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></SCRIPT> <STYLE><!-- .myStyle { position: absolute; visibility:hidden; top:150; left:300; } //--></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> Hello!! </DIV> </BODY> </HTML> を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。 そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。 で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。 お願いしますm(__)m

  • つづきです・2

    先ほどの質問のプログラムです。 どうぞよろしくお願いいたします。 (*印はサイトアドレスまたはファイル名です。) <script tupe="text/javascript"> <!-- window.onerror=null function getMouseX(e){ if(document.layers)return e.pageX if(document.all) return document.body.scrollLeft+event.clientX } function getMouseY(e){ if(document.layers)return e.pageY if(document.all) return document.body.scrollLeft+event.clientY } function moveLAYER(layName,x,y){ if(document.layers)document.layers[layName].moveTo(x,y) //NN用 if(document.all)document.all(layName).style.pixelLeft=x //IE用 if(document.all)document.all(layName).style.pixelTop=y //IE用 } function setBGCOLOR(layName,color){ if(document.layers)document.layers[layName].bgColor=color if(document.all)document.all(layName).style.backgroundColor=color } var nn4=!!document.layers var ie4=!!document.all function showHELP(no,e){ var offsetx=1 var offsety=1 moveLAYER('helplay'+no,(getMouseX(e)+offsetx),(getMouseY(e)+offsety)) } function hideHELP(no,e){ moveLAYER('helplay'+no,-100,-3) } //--> </script> <STYLE TYPE="text/css"> <!-- A { font-family:Osaka,Arial;font-size:10pt } .helplay { position:absolute;top:-100;left:-3 <!----> </STYLE> </head> <body bgcolor="#969696" link="#3c3c3c" text="white"> (つづきます) 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=453166

  • 緩やかなカーブを表現する

    今、座標(pos)と移動量(mov)を持った物体OBJがあります。 座標はx,y、移動量はspeed,theta(速度,角度)を持っています。 ここで、目的地GOAL(x,yを持つ)があり、OBJはそこに向かって移動します。 OBJがGOAL付近に到着すると、OBJはランダムな座標に設定されます。 ここで、私は飛行機や車のような緩やかなカーブを表現したいと思いました。そこで、 OBJの速度は一定で、目的地についたときに、OBJとその目的地までの角度を 変数OLDthetaに保存しておき、OLDthetaから新たな目的地までの角度(OBJ.mov.theta)を引き、 それが0でなければ、OLDthetaに0.05を加減させます。そうすると、 結果的にOLD.thetaはOBJ.mov.thetaと等しくなり、緩やかなカーブも表現できると思いました。 しかし、プログラムを実行すると、緩やかなカーブはするのですが、 遠回りなカーブをしたり、放って置くといきなり不規則な移動を起こして まったく関係のないところへ行ってしまいます。 どこらへんの考えが誤っているでしょうか?どなたか回答をお願いします。 ちなみに、移動量は OBJ.pos.x += cos(OLDtheta)*OBJ.mov.speed OBJ.pos.y += sin(OLDtheta)*OBJ.mov.speed で設定しています。 一応、関係のありそうな箇所のコードを書いておきます。 (角度を求めるコード) OBJ.mov.theta = atan2 (GOAL.y - OBJ.pos.y , GOAL.x - OBJ.pos.x); if(OLDtheta - OBJ.mov.theta != 0){ ______if(OLDtheta>OBJ.mov.theta){ ____________OLDtheta -= 0.05; ______}else{ ____________OLDtheta += 0.05; ______} } (構造体) struct VEC{ ______float x,y; }; struct VEC2{ ______float speed; //スピード ______float theta; //角度 }; struct CharaData{ ______VEC pos; //座標 ______VEC2 mov; //移動量 };

専門家に質問してみよう