- 締切済み
javascriptで困っています
初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の１つのhtmlファイルで作ると動くのですが <html> <head> <title>エンドロール</title> <style type="text/css"> #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } </style> </head> <body onLoad="setInterval('endroll()', 50);"> <script type="text/javascript"> var y = 320; function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } </script> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> これを、htmlファイル、cssファイル、jsファイルに分けてつくると、動かなくなります-----index.html---------------------------------------------------------------------- <html> <head> <link rel="stylesheet" href="endroll.css" type="text/css" /> <script src="endroll.js"></script> <title>エンドロール</title> </head> <body> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> -------endroll.css--------------------------------------------------------------- @charset "utf-8"; #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } ---------endroll.js-------------------------------------------------------------- window.onload = function(){ start_endroll(); } var y = 320; // 繰り返し処理の内容 function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } // 繰り返し処理の開始 function start_endroll() { timerID = setInterval('endroll()',50); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ss-ak
- ベストアンサー率58% (23/39)
厳密に言えば、少し誤っていると思われる部分や「こう書いた方が良い」と思われる部分が幾つか気になりましたが、「ファイルを分けた」という原因で、動作する／しないに影響が出るものではないと思われます。 当方の環境で、投稿されたコードを実行させてみましたが、IE9、Chromeとも、ファイル分割後のバージョンも普通に動作しました。 まさか、とは思いますが、3つのファイル(HTML、CSS、JavaScript)を同一フォルダに置いていないとか？ あとは、考えられるとしたら、HTTPサーバの設定や、Webサーバ上でのファイルのアクセス権設定に何らかの原因がある、などでしょうか。 「動かなくなる」とは、どのような環境で、具体的に、どのような症状になるのでしょうか。 原因を絞り込むためには、次のようなことを試してみると良いかと思います。 ■3つのファイルを、ローカル環境上の同一フォルダに置き、実行させてみる。 ローカル環境でJavaScriptを実行させようとすると、ブラウザの警告が表示される場合がありますが、今回は自作の、特に害はないと思われるJavaScriptコードを実行させる事が判っているので、実行を許可して良いでしょう。 ローカル環境ならば動くのであれば、サーバ側でのファイルのアクセス権、あるいはHTTPサーバの設定が疑われます。 ■ファイルを分けたCSS、JavaScriptがブラウザに正しく読み込まれ解析されているか確認する。 最近のブラウザ(IE、Chrome、Firefox等)では、「開発者ツール」「デベロッパーツール」等という名称の、デバッグ機能が内蔵ｄされています(FireFoxではFireBugというデバッグツールの導入が必要かもしれません)。 これらを使うと、HTMLを読み込んだ後に、CSSとJavaScriptファイルが読み込まれ、有効になっているかを確認できますし、デバッガの機能がありますから、原因調査にかなり役立ちます。
関連するQ&A
- 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
- 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
- パララックスが出来ない。
javascript初心者です。 http://www.webopixel.net/javascript/350.html を参考にして、以下のようにhtmlファイルを 作りましたが、bg1の画像が繰り返され貼りついているだけです。何が悪いんでしょうか？ <head> <style type="text/css"> <!-- #bg01 { background: url(images/bg1.png); height: 3000px; } #bg02 { background: url(images/bg2.png); } #bg03 { background: url(images/bg3.png); } --> </style> <script type="text/javascript" > $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#bg01').css('background-position', '0 ' + parseInt( -y / 5 ) + 'px'); $('#bg02').css('background-position', '0 ' + parseInt( -y / 50 ) + 'px'); $('#bg03').css('background-position', '0 ' + parseInt( -y / 200 ) + 'px'); }); }); </script> </head> <body> <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> </body> </html>
- ベストアンサー
- 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>
- ベストアンサー
- その他([技術者向] コンピューター)
- jQueryのfilterについて
jQuery初心者です。 .filterを使って、特定のCSSプロパティの値を持つものを検索し、抽出したもののCSSを書換えたいのですが、うまくいきません。 -------------------- z-indexの値が0以上のdivのwidthを200pxに変えるというコードを書いたつもりなんですが動きません。 ※head内 <style type="text/css"> <!-- div.animal { height:50px; border:5px solid red; background:rgb(255,140,0); } #neko { width:50px; position: absolute; z-index: 0; top: 50px; left: 50px; } #inu { width:50px; position: absolute; z-index: 1; top: 70px; left: 70px; } //--> </style> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> $('div').filter(function(){ return (parseInt($(this).css("z-index").text())>0); }).css("width","200px") </script> ※body内 <div id=neko class=animal></div> <div id=inu class=animal></div> 詳しい方が居られましたら、ご教授いただけませんでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- 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
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
- 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
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
