- 締切済み
javascript スライドバー
ダイナミックHTMLに掲載されている jsでのスライダーを同一ページで複数使いたいのですが どおうすればいいでしょうか？ <body onLoad="Init()">で読み込んでいます。 詳しい方がいましたらご教授お願い致します。 var iniX = 150; //バーの初期位置(x) var iniY = 0; //バーの初期位置(y) var dY = -45; //バーに対するスライダーの表示位置(y) var dX1 = 0; //バーに対するスライダーの表示位置(x,最も左) var dX2 = 330; //バーに対するスライダーの表示位置(x,最も右) var valx = -120; //バーに対する数値を表示する位置(x) var valy = -120; //バーに対する数値を表示する位置(y) var minValue = 0; //最小値 var maxValue = 1500; //最大値 var iniValue = 0; //初期値 var M_flag = false; var mdx,mdlayx,mmx,mmlayx; var xmax,xmin; function Init(){ dx = dX2 - dX1; x = dx * ((iniValue - minValue) / (maxValue - minValue)); xmin = iniX + dX1; xmax = iniX + dX2; if(document.all){ document.all("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.all("iLf").style.posLeft = xmin + x; document.all("iLf").style.posTop = iniY + dY; document.all("iLb").style.posLeft = iniX; document.all("iLb").style.posTop = iniY; document.all("iLv").style.posLeft = iniX + valx; document.all("iLv").style.posTop = iniY + valy; document.all("iLv").innerHTML = iniValue; }else if(document.layers){ }else if(document.getElementById){ document.getElementById("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.getElementById("iLf").style.left = xmin + x+"px"; document.getElementById("iLf").style.top = iniY + dY+"px"; document.getElementById("iLb").style.left = iniX+"px"; document.getElementById("iLb").style.top = iniY+"px"; document.getElementById("iLv").style.left = iniX + valx+"px"; document.getElementById("iLv").style.top = iniY + valy+"px"; document.getElementById("iLv").innerHTML = iniValue; document.testimg.width = iniValue/4.5; document.testimg.height = 35; } } function Mdown(e){ if(document.all){ mdx = event.x; mdlayx = document.all("iLf").style.posLeft; }else if(document.layers){ }else if(document.getElementById){ mdx = parseInt(e.pageX); mdlayx = parseInt(document.getElementById("iLf").style.left); } M_flag = true; return false; } function Mup(e){ M_flag = false; return false; } function Mmove(e){ if(document.all){ if(M_flag){ mmx = event.x; mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.all("iLf").style.posLeft = mmlayx; document.all("iLv").innerHTML = x; } event.returnValue = false; }else if(document.layers){ }else if(document.getElementById){ if(M_flag){ mmx = parseInt(e.pageX); mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.getElementById("iLf").style.left = mmlayx+"px"; document.getElementById("iLv").innerHTML = x; document.testimg.width = x/4.5; document.testimg.height = 35; } return false; } }
- daab04
- お礼率66% (10/15)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… ＞どおうすればいいでしょうか？ 一番簡単なのは、必要な数だけ同じものを設置すること。 でも、ご提示のスクリプトだと変数名やHTMLの要素などが重複してしまうので、それぞれ名前を変えてあげないとうまく動作しません。 同じものを何度も繰り返すのは効率が悪いので、通常は、オブジェクト化して必要な数だけインスタンスを作成して使うかと思いますが、そのようにするためには全体を書き直す必要があります。（ご提示のスクリプトはまったくそのようには考えられていないので） このあたりが参考になるかも。 http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs04/ajaxjs04_01.html http://www.graviness.com/virgo/javascript/object.html http://keicode.com/script/scr24a.php 意味がわからないという場合は、ご提示のスクリプト以外のもので複数設置可能なものを探すとか… 例えば、適当に検索して引っかかった以下のようなものとか http://www.blueshoes.org/en/javascript/slider/
関連するQ&A
- javascript バウンス
javascriptで、月と星を動かしたいのですが…… 星は動くけど、月が動きません。 初歩的なミスだと思いますし、いっぱい間違えてると思いますが… 助けて下さい！ <html> <head> <title>Ｍoon & Ｓtar</title> <style type="text/css"> div{font:30pt; color:white; z-index:2} div2{font:30pt; color:white; z-index:3} #box{position:absolute; left:50px; top:50px; width:400px; height:280px; background-color:black; z-index:1} #title{position:absolute; left:100px; top:100px} #title2{position:absolute; left:200px; top:200px} #star{position:absolute; left:50px; top:170px; z-index:3} #moon{position:absolute; left:200px; top:170px; z-index:3} </style> <script type="text/javascript"> var imgStar,imgMoon,timer,timer2; var x = 50; //星のX座標 var y = 170; //星のY座標 var dx = 6; //星が１ステップごとに動くXの長さ var dy = 4; //星が１ステップごとに動くYの長さ var syototsu = 0; //境界に衝突したら"1"、していなければ"0" var colorname="black"; //ボックスの背景色 var mx = 100; //月のX座標 var my = 170; //月のY座標 var mdx = 6; //月が１ステップごとに動くXの長さ var mdy = 4; //月が１ステップごとに動くYの長さ var msyototsu = 0; //月境界に衝突したら"1"、していなければ"0" function startMove(){ imgStar = document.getElementById("star"); //IDが"star"のオブジェクトを「imgStarオブジェクトに」 timer = setInterval("moveImg()",50); imgMoon = document.getElementById("moon"); //IDが"moon"のオブジェクトを「imgMoonオブジェクトに」 timer2 = setInterval("moveImg2()",60); } function moveImg(){ if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; //前回計算しておいた場所(x,y)に画像を表示 imgStar.style.top = y + "px"; //(単位をつけて代入していることに注意！) x = x + dx; y = y + dy; if(x<=50 || x>=410){ dx = -dx; //次のステップの場所がxの領域外であれば、xの移動方向を逆転 syototsu = 1; } if(y<=50 || y>=290){ dy = -dy; //次のステップの場所がyの領域外であれば、yの移動方向を逆転 syototsu = 1; } } function moveImg2(){ if(msyototsu == 1) changecolor2(); imgMoon.style.right = mx + "px"; //前回計算しておいた場所(x,y)に画像を表示 imgMoon.style.bottom = my + "px"; //(単位をつけて代入していることに注意！) mx = mx + dx; my = my + dy; if(mx<=50 || mx>410){ mdx = -dx; //次のステップの場所がxの領域外であれば、xの移動方向を逆転 msyototsu = 1; } if(my<=50 || my>=290){ mdy = -mdy; //次のステップの場所がyの領域外であれば、yの移動方向を逆転 msyototsu = 1; } } function changecolor(){ if(syototsu == 1){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function changecolor2(){ if(msyototsu = 0){ colorname = "aqua"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; msyototsu = 0; } function stopTimer(){ clearInterval(timer); } </script> </head> <body onload="startMove();startMove2();" onunload="stopTimer();"> <div id="box"></div> <div id="title">Star Light</div> <div id="title2">Moon Light</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- JavaScript
- オブジェクトがぶつかった時の処理
<script type="text/javascript"> <!-- var imgStar ,imgMoon, timer; var dx = 6, dy = 4, x = 40, y = 160; function startMove(){ if (document.getElementById){ imgStar = document.getElementById("star"); imgMoon = document.getElementById("moon"); timer = setInterval("moveImg()",50); } } function moveImg(){ imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; imgMoon.style.left = (440-x) + "px"; imgMoon.style.top = (320-y) + "px"; x = x + dx; y = y + dy; if (x<=40 || x >= 400) dx = -dx; if (y<=40 || y >= 280) dy = -dy; } function stopTimer() { if (window.clearInterval) clearInterval(timer); } //--> </script> 星と月がぶつかると、お互い逆方向にはね返るようにしたいのですが、この場合どうすれば良いでしょうか？
- 締切済み
- JavaScript
- Javascriptで星と月の２つの画像を動かしたいのですが…
星は動きますが、月が動いてくれません。どこが間違ってるのかわからないので、誰かわかる方、教えていただきたいです。よろしくお願いします；； <html> <head> <title>オブジェクトを動かす</title> <style type="text/css"> div {font:30pt ; color:white ; z-index:2} #box {position:absolute ; left:50px ; top:50px; width:400px;height:280px ; background-color:black ; z-index:1} #title1 {position:absolute; left:100px ; top:100px} #title2 {position:absolute; left:80px ; top:50px} #star {position:absolute; left:50px ; top:170px ; z-index:3} #moon {position:absolute; left:50px ; top:170px ; z-index:3} </style> <script type="text/javascript"> var imgStar; var imgMoon; var timerA; var timerB; var x = 50; var y = 170; var dx = 6; var dy = 4; var syototsu = 0; var colorname = "black"; function startMove() { imgStar = document.getElementById("star"); timerA = setInterval("moveImgA()", 50); } function startMoon() { imgMoon = document.getElementById("moon"); timerB = setInterval("moveImgB()", 50); } function moveImgA() { if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function moveImgB() { if(syototsu == 1) changecolor(); imgMoon.style.left = x + "px"; imgMoon.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function changecolor(){ if(colorname == "black"){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function stopTimerA(){ clearInterval(timerA); } function stopTimerB(){ clearInterval(timerB); } </script> </head> <body onload="startMove();" onunload="stopTimerA();"> <body onload="startMoon();" onunload="stopTimerB();"> <div id="box"></div> <div id="title1">StarLight</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="title2">MoonLight</div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- 以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ
以下のJAVASCRIPTが、動作しないのですが、その原因がわかりません。助けてください <html> <head> <script type="text/javascript"> var x=200,y=100; var dx=10,dy=10; function move() { setTimeout("move()",100); var ball=document.getElementById("ball"); x+=dx; y+=dy; ball.style.left=x; ball.style.top=y; if (x<=50 || x+10>=450) dx=-dx; if (y<=50 || y+10>=450) dy=-dy; } </script> </head> <body onLoad="move()"> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left:200;top:100"> </body> </html>
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- IE11 javascriptについて
すみません、IE11なってから、以下のjavascriptが動かなくなりました。 画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。 全部のロジックを書いてしまいましたが、 何処がIE11から変更されたかが解らなくて、困っている所です。 何処を直すのか、全部聞くのもあつかましいと思いました、 どのあたりを見直しすれば宜しいですか。 教えて頂ければ幸いです。 <SCRIPT language="JavaScript"> <!-- var img = new Array(); img[0] = new Image(); img[0].src = "img/4031.jpg"; img[1] = new Image(); img[1].src = "img/4032.jpg"; img[2] = new Image(); img[2].src = "img/4031.jpg"; img[3] = new Image(); img[3].src = "img/4032.jpg"; img[4] = new Image(); img[4].src = "img/4031.jpg"; imgMaxSizeW = 171; imgMaxSizeH = 141; alphaTimer = 10; stopTimer = 2000; nextImgTimer = 1000; _dom=(document.all?3:(document.getElementById?1:(document.layers?2:0))); function getWindowSize() { if(_dom == 1 || _dom == 2) { win_width = self.innerWidth; win_height = self.innerHeight; } if (_dom == 3) { win_width = document.body.clientWidth; win_height = document.body.clientHeight; } } function showLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "visible"; if (_dom == 2) document.layers[layerName].visibility = "show"; if (_dom == 3) document.all(layerName).style.visibility = "visible"; } function hideLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden"; if (_dom == 2) document.layers[layerName].visibility = "hide"; if (_dom == 3) document.all(layerName).style.visibility = "hidden"; } function writeHTML(layerName,html) { if (_dom == 1) { var div = document.getElementById(layerName); while(div.hasChildNodes()) div.removeChild(div.lastChild); var range=document.createRange(); range.selectNodeContents(div); range.collapse(true); var cf=range.createContextualFragment(html); div.appendChild(cf); } if (_dom == 2) { var div = document.layers[layerName]; div.document.open(); div.document.write(html); div.document.close(); } if (_dom == 3) document.all(layerName).innerHTML = html; } function moveLayerTo(layerName, x, y){ if (_dom == 1) { document.getElementById(layerName).style.left = x + scrollX; document.getElementById(layerName).style.top = y + scrollY; } if (_dom == 2) { document.layers[layerName].left = x + pageXOffset; document.layers[layerName].top = y + pageYOffset; } if (_dom == 3) { document.all(layerName).style.pixelLeft = x + document.body.scrollLeft document.all(layerName).style.pixelTop = y + document.body.scrollTop; } } function changeAlpha(layerName) { if (_dom == 3) { if (alphaCount < 200) { alphaCount += 2; op = alphaCount > 100 ? 100 - (alphaCount-100) : alphaCount; document.all(layerName).filters["alpha"].opacity = op; if (op == 100) { tim = setTimeout("changeAlpha('"+layerName+"')", stopTimer); } else { tim = setTimeout("changeAlpha('"+layerName+"')", alphaTimer); } } else { hideLayer(layerName); clearTimeout(tim); tim = setTimeout("setAlphaImgPos()",nextImgTimer); } } else { setTimeout("setAlphaImgPos()",nextImgTimer*2); } } var imgCount = 0; function setAlphaImgPos() { writeHTML("imgLay",'<IMG src="' + img[imgCount].src + '" border="0">'); imgCount++; if (imgCount >= img.length) imgCount = 0; getWindowSize(); sX = Math.floor(Math.random()*(win_width-imgMaxSizeW-10)); sY = Math.floor(Math.random()*(win_height-imgMaxSizeH-10)); moveLayerTo("imgLay",sX,sY); showLayer("imgLay"); alphaCount = 0; changeAlpha("imgLay"); } window.onload = setAlphaImgPos; // --> </SCRIPT>
- ベストアンサー
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- javascriptで困っています
javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作 ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか？少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得 できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を 取得できます 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <title>test</title> <style type="text/css"> #panel_board{ width:320px; height:384px; position:relative; } #move_panel{ width:64px; height:64px; position:absolute; background-color:#0F9; z-index:10; } </style> <script type="text/javascript" charset="utf-8"> <!-- function init() { var panel_board = document.getElementById("panel_board"); panel_board.addEventListener("touchstart", function(e){ //クリックしたの場所のマス目 var x = e.touches[0].pageX; var y = e.touches[0].pageY; // 新規に要素div（タグ）を生成 var ele = document.createElement("div"); //idをつける ele.id = "move_panel"; //生成した要素の位置を決める ele.style.left=x+"px"; ele.style.top=y+"px"; // panel_boardに生成した要素を追加 panel_board.appendChild(ele); }, false); panel_board.addEventListener("touchmove", function(e){ //動いた位置を取得 var xx = e.touches[0].pageX; var yy = e.touches[0].pageY; //move_panelを動かす document.getElementById("move_panel").style.left = xx+'px'; document.getElementById("move_panel").style.top = yy+'px'; //位置を表示 document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = xx; document.getElementById("txt2").innerHTML = yy; }, false); panel_board.addEventListener("touchend", function(e){ //要素を消す var mp = document.getElementById("move_panel"); mp.parentNode.removeChild(mp); }, false); } // --> </script> </head> <body onLoad="init();"> <div id="panel_board"> </div> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </body> </html>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
