• 締切済み

レイヤーを動かしたい!

レイヤーをボタンを押すと親レイヤーの中で子レイヤーがスクロールさせるようにしたいのですが、 下記のスクリプトでY軸方向にというのは出来るのですが、これをX軸方向に変えたいのです。 どこら辺をいじればよいのでしょうか? (おそらく必要と思われる部分を抜粋しています。) var speed=40 var loop, timer function makeObj(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight this.up=goUp;this.down=goDown; this.moveIt=moveIt; this.x; this.y; this.obj = obj + "Object" this.timerID= null; eval(this.obj + "=this") return this } function moveIt(x,y){ this.x=x;this.y=y this.css.left=this.x this.css.top=this.y } function goDown(move){ if(this.y>-this.scrollHeight+oCont.clipHeight){ this.moveIt(0,this.y-move) if(loop) this.timerID= setTimeout(this.obj+".down("+move+")",speed) } } function goUp(move){ if(this.y<0){ this.moveIt(0,this.y-move) if(loop) this.timerID= setTimeout(this.obj+".up("+move+")",speed) } } function scroll(speed){ if(loaded){ clearTimeout(oScroll.timerID); loop=true; if(speed>0) oScroll.down(speed) else oScroll.up(speed) } } function noScroll(){ loop=false if(timer) clearTimeout(timer) }

みんなの回答

  • eim-yuuma
  • ベストアンサー率37% (10/27)
回答No.1

この質問ではお答えのしようがないように思います。 bodyのレイヤーに関する部分をいただけませんか? (いただいたあとにお答えできる自信がありませんが・・・(-_-;)

関連するQ&A

  • javascriptで困っています。教えてください

    javascript初心者です。以前javascriptでクラスについていろいろな方にアドバイスをいただき、疑問が解決しました。ありがとうございました。 そこで、そのクラスから作ったインスタンスを移動させようとしているのですが、うまくいきません。 html <body onload="init();"> <div id="a"></div> </body> css body{ position:relative; } #a{ width:100px; height:100px; position:absolute; background-color:#0F0; } javascript function Character(x,y){      this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 10; this.y += 10; this.ele.style.left = this.x+"px"; this.ele.style.top = this.y+"px"; } } function init(){ var cha = new Character(10,10); var timer; timer = setInterval("loop()",1000); } function loop(){ cha.move(); } としたら、緑の正方形がx方向、y方向に移動1秒毎に10pxずつ増えながら移動していくと思っていたのですが、うまくいきませんでした。 setIntervalを使わず、var cha = new Character(10,10);の後にcha.move();cha.move();cha.move();c1.move();cha.move();とすると、座標(60,60)に緑の正方形が現れます。 緑の正方形を移動させるにはどうしたらいいのでしょうか。教えてください。

  • javascriptで困っています。教えてください

    javascript初心者です。javascriptでクラスのようなものを扱えると知り、いろいろ調べながら取り組んでいます。 html <div id="a"></div> css #a{ width:100px; height:100px; background-color:#0F0; } javascriptでクラスを作って function Character(x,y){      this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 100; this.y += 100; this.ele.style.left = this.x; this.ele.style.top = this.y; } } var cha = new Character(10,10); cha.move(); としたら、緑の正方形が座標(100,100)あるのかと思っていたのですが、うまくいきませんでした。 javascriptのクラスとhtmlの要素を紐づけるにはどうしたらいいのでしょうか?教えてください。

  • インラインフレーム内の変数を親ページから呼び出す

    インラインフレーム内のマウス位置を↓のjavascriptコードで取得しているのですが、親ページのjavascriptの関数で使用したいです。どのようにインラインフレーム内の変数を親ページから呼び出して、利用すればよいのでしょうか? var x, y; window.addEventListener("DOMContentLoaded", function(){ window.document.onmousemove = function(e){ x = getMousePosition(e).x; } },false); function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; }

  • Netscapeで動かない

    みなさん、こんにちは。Blackwinglsです。 以下のようなScriptを作成したのですが、Netscapeで動いてくれません(^^;) IEしか持っていないので、Netscapeに対応させるにはどうしたら良いのかさっぱりわかりません。 <script language="JavaScript"> <!-- var ax=20 function mv() { if(document.all) { obj=document.all.L1.style WIDTH=document.body.clientWidth } if(document.layers) { obj=document.L1 WIDTH=window.innerWidth } setTimeout("mv()",100) x=obj.left n=x.length y=(eval(x.substring(0,n-2))-ax) obj.left=y+"px" x2=obj.width n2=x2.length y2=(eval(x2.substring(0,n2-2))) if(y < -y2) { obj.left=WIDTH } } //--> </script> 何処が間違っているのでしょうか? 良きアドバイスをお願いします。

  • イベントが初めの一回しか起きません

    JavaScriptを勉強し始めて何とか自分のホームページに使いたいのですが、以下のプログラムをonClickイベントハンドラで動かせたいのですが、初めの一回のみ動き、その後クリックしても動きません。やはり作り直した方がいいのでしょうか。 var timerID; var ichi = 68; var maxX = 120; var perX = 2; speed = 10; function layerMv(){ if(ichi<maxX) { ichi += perX; if(document.all){ var data = document.all('S1').style; data.visibility = "visible"; data.left = ichi; } if(document.layers){ var data = document.layers['S1']; data.visibility = "visible"; data.left = ichi; } timerID = setTimeout("startMv()",speed); }else if(ichi==maxX){ clearTimeout(timerID); } } 他のボタンonMouseoverで初期位置(68,y)に通常のレイヤー移動。 その後動かなくなります。 どうかよろしくお願いします。

  • プルダウンメニューの再選択時

    いつもお世話になります。 プルダウンメニューを誤って選択した時などに、 上の階層に戻って再選択をする場合、 一番上の階層のプルダウンに戻ると下層のプルダウンが消えて、 改めて初めからの選択が可能なのですが、 たとえば二番目の階層のプルダウンに戻った場合、 プルダウンが消えずに、さらに下、下へとプルダウンが作成されてしまいます。 戻ったところよりの下の階層のプルダウンだけを消すにはどのようにしたらよいですか? <script language="javascript"><!-- x = document.getElementsByTagName("select"); function showthis(obj) { for(i=1;i<x.length;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis2(obj) { for(i=6;i<10;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis3(obj) { for(i=10;i<16;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function showthis4(obj) { for(i=16;i<22;i++) { x[i].style.display = "none"; } if(!obj) return false; document.getElementById(obj).style.display = "inline"; } function jump(url) { if(!url) return false; window.open(url,""); } // --> </script> <style type="text/css"><!-- select { display:none; } #item0 { display:inline; } --></style>

  • 指定したレイヤーをfixed表示にする

    var css={ //省略 doFixed:function(element,LayerX,LayerY){ if(element.style.position!='absolute'){ element.style.position='absolute'; } var LayerLeft=this.getLayerLeftonPage(element); //ページ上、レイヤーの左辺座標 var LayerTop=this.getLayerToponPage(element); //ページ上、レイヤーの上辺座標 this.setLayerPosition(element,LayerLeft,LayerTop); //対象,セットする対象の左辺座標,セットする対象の上辺座標 LayerX=LayerX ? LayerX : LayerLeft; //つまり、引数のLayerXは省略可能 LayerY=LayerY ? LayerY : LayerTop; //つまり、引数のLayerYは省略可能 addEvent(window,'scroll',function(){//イベントリスナです。 css.setLayerPosition(element,LayerX+css.getScrollLeft(),LayerY+css.getScrollTop()); /* ウィンドウ上でスクロールされたら、直ちにセット。 css.getScrollLeft……X方向のスクロール量 css.getScrollTop……Y方向のスクロール量 */ }); addEvent(document,'mousemove',function(evt){//ドラッグ要素にしたりしたときの対策 if(getEventElement(evt)===element){//event.targetのクロスブラウザ LayerX=css.getLayerLeftonPage(element); LayerY=css.getLayerToponPage(element); } }); }, //省略 }; このように、指定したレイヤーをfixed表示にする方法を思いついたのですが、どうしてもガタついてしまいます; 背景画像を固定するという方法も見かけますが、それは避けたいです>< どうにかして、出来ないでしょうか? http://kyukyoku.xrsp.net/cgi-bin/Test.cgi こちらがテストです。 御回答宜しくお願いしますm(_ _)m

  • 効率良くイベントに引数を渡すやり方

    sample2に引数「x」「y」を渡したいが為に 次のように何段階も同じような作業をしなくてはならない方法しか 自分は思いつかないのですが、何かもっと効率的な方法はあるのでしょうか? function main() { var element = document.createElement('div'); element.x = x; element.y = y; element.onclick = function(){ sample1(this.x, this.y); }; } function sample1(x, y) { var element = document.createElement('span'); element.x = x; element.y = y; element.onclick = function(){ sample2(this.x, this.y); }; } function sample2(x, y) { alert("x="x+" y="+y); }

  • actionscript クラスのメンバ変数のアクセスについて

    やりたいことは、 ムービークリップ(move_mc)をある座標まで、 減算処理をしながら移動するということなんですが、 クラスを勉強中で下記のように書いてみました。 ■インスタンス生成&メソッドへアクセス var move1:Move = new Move(5,100); move1.onclick(); ■asファイル class Move{ var speedPro:Number; var rangePro:Number; function Move(speed:Number,range:Number){ this.speedPro = speed; this.rangePro = range; trace(this.speedPro);//ここの値は5がでます } public function moving(){ _root.move_mc.onEnterFrame = function(){ this._x += (this.rangePro - this._x)/this.speedPro; trace(this._x); trace(rangePro);//undefined trace(this.speedPro);//undefined } } public function onclick(){ _root.move_mc.onRelease = moving; } } speedとrangeでスピードの値と移動範囲の値を引数で渡しています。 コンストラクタ関数のところでtraceするとちゃんと値はわたっていますが、moving関数のところではちゃんと値を取れていないようです。 メンバ変数にちゃんととりにいけていないようなのですが、 どのような書き方をしたらとりにいけるのでしょうか。。。 また、根本的にこのような書き方であっているのでしょうか。。。 ご協力お願いします。

    • ベストアンサー
    • Flash
  • 画像がフェードイン・アウトするクラスの作り方教えて..

    前置き:別に困っているわけでもありません ・こんな質問許されないかも(ご容赦を) ・自分で勉強しろと言われるかも(ごもっとも) ・ごみプログラムがさらにごみプログラムを生んでいるかも(ごめんなさい) 本題: いつぞやのタイトルくるくるのサンプルを基に、画像がフェードイン、 フェードアウトするオブジェクト指向っぽいスクリプトを作りました。 下のソースです。スタイル属性の変更をwindow.setIntervalを使って counter値に達するまでループ実行しているだけです。 似たような処理のfadeinクラスとfadeoutクラスを作って、  fadein.start(ターゲット,インターバルミリ秒);  fadeout.start(ターゲット,インターバルミリ秒); でフェードイン、フェードアウトを開始していますが、 fadeinクラスとfadeoutクラスをfadeinoutクラス一つにまとめちゃって、 fadeinoutクラスのメソッド(?)としてfadein、fadeoutを使えるように するには、どうやって作ればよいのかと言うのが質問です。 本当は、  var myobj = new fadeinout(ターゲット,インターバルミリ秒); とインスタンスして  myobj.fadein;  myobj.fadeout; みたく使うためのコーディングがよくわからんのです。 抜本的に書き換えた方がよいのでしょうか... <作ったサンプル> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>FadeIn/FadeOut</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- var fadein = function (node,interval){ this.counter = 0; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( ++this.counter>100) this.stop(); }; }; var fadeout = function (node,interval){ this.counter = 100; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( --this.counter<0) this.stop(); }; }; fadein.start = function(target,interval){ new fadein(target,interval ); } fadeout.start = function(target,interval){ new fadeout(target,interval ); } function fadein_s(){ var target=document.getElementById("target"); fadein.start(target,1); } function fadeout_s(){ var target=document.getElementById("target"); fadeout.start(target,1); } // --> </script> </head> <body> <div> <image id="target" src="image/yahagi.png" style="width:0px;height:0px;"> </div> <button onclick="fadein_s();">フェードイン</button> <button onclick="fadeout_s();">フェードアウト</button> </body> </html>

専門家に質問してみよう