• ベストアンサー

javascriptにおいてだんだんと処理する

javascriptにおいて質問です。 いま、divタグ内に表などを配置して、大体heightは500pxあるとします。 そのときに、0.3秒毎にdivの高さを30pxくらい減らして、 アニメーションみたくdivの高さを0にして非表示のようにしたいのですが、 組み方で苦労しています。 var oriHeight = $(\"data_div\").offsetHeight; for (var i = eval(oriHeight); i >= 0 ; i--) { val_height = \"\" + i + \"px\"; var timerId = setTimeout(function() { $(\"data_div\").style.height = val_height; }, 300); i=i-30 } //$関数はgetElementIdの省略関数 これだと一気にdivタグが縮んでしまって、だんだんと縮まる ことをしたいのです。 arguments.calleeとか再帰処理とかがポイントでしょうか??

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

divの高さが0になっても消えない場合があるので、最終的には 高さが0なら表示しないという処理がいるかも こんな感じで。 <script> window.onload=function(){ h = document.getElementById("data_div").offsetHeight; } function hoge(){ h -= h>=30?30:h; document.getElementById("data_div").style.height=h.toString()+"px"; if(h==0){ document.getElementById("data_div").style.display="none"; return false; } setTimeout("hoge()",300); } </script> <div id="data_div" style="height:500px;background-Color:red;"> test </div> <input type="button" value="start" onclick="hoge()">

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

noname#84373
noname#84373
回答No.2

ちょっと挙動不審ですが、だめ? <html> <body> <div id="a" style="border:1px resolid;background.color:#fee;height:500px;width:300px;overflow:hidden;">a<br>c</div> <input type="button" value="^_^" onClick="hide('a',333,30)"> <script type="text/javascript"> function hide(o,t,p){ var h=$(o).offsetHeight; if(h>0){ $(o).style.pixelHeight=h-p; setTimeout("hide('"+o+"',"+t+","+p+")",t); } } function $(o){return document.getElementById(o)} </script> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
  • toy_can
  • ベストアンサー率26% (45/172)
回答No.1

ループをまわすのではなく getSeconds getMilliseconds で秒またはミリ秒をとって判断してみてはどうでしょうか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • JavaScriptにて『var val2 = "dv" + i;』のdvとは?、超初心者です。

    <script type="text/javascript"> <!-- var timerID = ""; function mn(n){ if(timerID != ""){ clearTimeout(timerID); } var val = n; dlt2(); document.getElementById(val).style.visibility="visible"; document.getElementById(val).style.zIndex="1"; } function dlt(){ timerID=setTimeout("dlt2()",100); } function dlt2(){ for (i=1;i<3;i++){ var val2 = "dv" + i; document.getElementById(val2).style.visibility="hidden"; document.getElementById(val2).style.zIndex="0"; } } //--> </script> <style type="text/css"> <!-- a{text-decoration:none;color:gray;} a:hover{color:#000000;} body{color:#000000;font-size:12pt; line-height:150%;font-family:"MS Pゴシック";} table{color:#ffffff;font-size:12pt; line-height:150%;font-family:"MS Pゴシック";} #dv1{ /* ↓ここの position の値がプルダウンメニュー1の表示位置です */ position:absolute;left:12;top:42; background-color:#ffffff;visibility:hidden; border: 1px solid gray; } --> </style> </head> <body> (文字数制限により省略させていただきます) </body> </html> ---------- 参考URL: http://ryos.info/hp_sakusei/pulldown.htm JavaScriptでプルダウンメニューを作ろうとして、ネットで勉強していますが早速つまずいています。 調べてみましたが、結局解りませんでした。 上記のfunction dlt2()の部分で、『var val2 = "dv" + i;』とあります。 この"dv" とは何を表しているのでしょうか? 初歩的な質問で申し訳ございません。 教えていただけましたら幸いです。

  • css javascriptについて教えて下さい。

    下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。 そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #w{ width:500px; height:50px; border : solid 1px; overflow: hidden; } p{ display:inline-block; width:50px; height:50px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript" language="javascript"> var count = 0; var box; window.onload = function() { box = document.getElementById("w"); } function btnClick(){ var pNode = document.createElement("p"); pNode.innerHTML = count;   box.appendChild(pNode); count ++; } </script> </head> <body> <div id="w"></div> <button onClick="btnClick()">Pタグを生成</button> </body> </html>

    • ベストアンサー
    • HTML
  • 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で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について

    現在HPを作成していてjavaのプルダウンメニューを設置していますが 最初からメニューが開いた状態になります。ちなみにsdmenu.jsを使用しています。 最初開いた時にメニューが閉じるようにできますでしょうか? function SDMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); this.remember = true; this.speed = 4; this.markCurrent = true; this.oneSmOnly = false; } SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; SDMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; SDMenu.prototype.expandMenu = function(submenu) { var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var links = submenu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) fullHeight += links[i].offsetHeight; var moveBy = Math.round(this.speed * links.length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight + moveBy; if (newHeight < fullHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = ""; mainInstance.memorize(); } }, 30); this.collapseOthers(submenu); }; SDMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight - moveBy; if (newHeight > minHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = "collapsed"; mainInstance.memorize(); } }, 30); }; SDMenu.prototype.collapseOthers = function(submenu) { if (this.oneSmOnly) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); } }; SDMenu.prototype.expandAll = function() { var oldOneSmOnly = this.oneSmOnly; this.oneSmOnly = false; for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className == "collapsed") this.expandMenu(this.submenus[i]); this.oneSmOnly = oldOneSmOnly; }; SDMenu.prototype.collapseAll = function() { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; SDMenu.prototype.memorize = function() { if (this.remember) { var states = new Array(); for (var i = 0; i < this.submenus.length; i++) states.push(this.submenus[i].className == "collapsed" ? 0 : 1); var d = new Date(); d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); } };

  • javascriptのcanvasについて

    先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま(この記述でいうと茶色や赤)で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [  'hair1.png',  'hair2.png',  'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>

  • JavaScript FireFoxでのdiv

    こんにちは。趣味でプログラミングをしているものです。 JavaScriptで1から25までの数字が 正方形を25個に分割した小さな正方形に ランダムに配置されたものをクリックしていく、 というミニゲームを作っているのですが、 数字のピースの表示でつまづいています。 以下に質問の内容を説明をさせていただきますので よろしくお願いします。 ソースコードの全文は載せられないので おおかたは、抜粋となりますが、 よろしくおねがいします。 (1)正方形を25個に分けたときの各部分を表すクラスです。 var FieldPart = function( x, y, width, height, bordervalue, pnode ) { SpanBox.apply( this, arguments ); //SpanBoxというクラスの拡張 this.occupy = new Array( 0, 0, 0, 0 ); }; (2)クリックするための数字をあらわすクラスです。 var Piece = function( number, width, height, bordervalue, judgeman ) { //this.x = //this.y = this.number = number; this.width = width; this.height = height; //this.pobj = pobj; // ここではjudgemanのふるまいは関係ないので省略です。 this.judgeman = judgeman; this.span = null; this.border = bordervalue; }; var LPiece = function ( number, width, height, bordervalue, judgeman ) { //Piece.apply( this, number, width, height, bordervalue, pobj, judgeman ); Piece.apply( this, arguments ); }; * LPiece, FieldPart ともに親クラスからのメソッドの * 継承はうまくいっているようです。 (3) body 抜粋 html5用のサウンドを除けばこれだけです。 <body> <div id="stage"> <img "bgimage"> <input type="button" onclic="test2()"> <input type="button" onclic="test3()"> </div> </body> (4) 関数 test2 抜粋 for( i=0; i<5; i++) { for( j=0; j<5; j++ ) { FieldList[ 5*i + j ] = new FieldPart( 80*j, 80*i, 4, 4, "2px solid #ddffee", "stage" ); } } for( i=0; i<FieldList.length; i++ ) FieldList[ i ].setSpan();  で予定の位置にdivタグ(spanではありません)を描画し setIntervalで80pxまで拡大 (5) 関数 test3 抜粋 LList = new Array(); if( typeof judgeman == 'object' ) { for( i=1; i<=25; i++ ) { LList.push( new LPiece( i, 80, 80, "2px solid #ddffee", judgeman ) ); } for( i=0; i<25; i++ ) LList[i].belongTo( FieldList[i] ); } alert( "Piece.height :" + LList[0].height ); // alert の height の値は80です。 (6)LPieceのメソッドbelongTo です。 LPiece.prototype.belongTo = function( pobj ) { this.span = document.createElement( 'div' ); this.span.style.width = this.width; this.span.style.height = this.height; this.span.style.border = this.border; var elm = this.span; pobj.span.appendChild( elm ); // フォント等の設定 スーパーで定義するか? this.span.style.fontFamily = 'century'; this.span.style.fontWeight = 'bold'; this.span.style.fontSize = '22px'; this.span.style.color = '#00ff00'; this.span.style.paddingTop = 27; this.span.style.textAlign = 'center'; this.setTextNode( this.number ); var poccupy = [1,1,1,1]; pobj.setOccupyArray( poccupy ); //this.span.onclick = function(){ this.mouseAct(); }; }; このように記述して実行した場合、 IE9だと期待通りの表示がされるのですが、 firefoxだとLPieceのdivのborderの部分だけ (と推測するのですが、) y軸方向に一定の値だけずれて 表示されてしまいます。 (というのも,ピースで定義した数字が パーツの中央あたりに表示されているからです。) インスタンスのメソッドから インスタンスフィールドのdivにdivをappendせず、 同様の動作をする関数だと だいたい、期待通りのいちにappendされます。 (firefoxはPieceがx方向y方向に1,2ピクセルずれる感じです。) 正しい位置に表示される方法をご存知の方、 教えていただけないでしょうか? よろしくお願いします。

  • javascriptでオブジェクトの重なりを判定

    お世話になります。 javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。 果たして、そんなことは可能なのでしょうか。 <body> <div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div> <div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div> <div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></div> <div id="block4" style="background:#0F0; width:200px; height:200px; margin-left:800px;"></div> <div id="block5" style="background:#0F0; width:200px; height:200px; margin-left:1200px;"></div> <div id="block6" style="background:#0F0; width:200px; height:200px; margin-left:2000px;"></div> </body> <script> fucntion aaa(){ var bbb = document.getElementById("block1"); var move= parseFloat(bbb.style.left); bbb.style.left = (move+10)+"px"; } </script> というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました!」という感じで表示することはできないのでしょうか。javascript オブジェクト 重なり とかで検索しても、目的のものが出てこなかったので… どうぞ、よろしくお願い致します。

  • JavaScriptで音を鳴らす記述を教えて下さい

    JavaScriptにお詳しい方お願いします。 html5マウスオーバーで音が鳴る記述を作ろうとしています。 初心者未満の者でなのですがネット上に公開されているソースを引っ張って来てカスタムしようとしております。 下記記述でBoxと名前を付けたDivブロックにマウスを乗せるとsong1.wav(song1.mp3)という音声ファイルが鳴ります。 (現在の状況とご質問の意味が伝わればと思い動画を添付しました。) 続けてsound1とsound2いうDivブロックにも別々の音声ファイルを鳴らせたいのですが記述方法が分かりません。 Div sound1ではsong2.wav(song2.mp3) Div soud2ではsong3.wav(song3.mp3)を鳴らす記述方法をご指導いただければ幸いです。JavaScript達人の方々よろしくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>OKwave de ご質問</title> <style> .Box{ position: absolute; display: block; width: 250px; line-height: 150px; valign: middle; background-color: #000; text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-left: 50px; } .sound1{ position: absolute; width: 300px; height: 250px; margin-left: 330px; background-color: #aaa; font-size: 20px; font-weight: 700; text-align: center; } .sound2{ position: absolute; width: 300px; height: 250px; margin-left: 660px; background-color: #bbb; font-size: 20px; font-weight: 700; text-align: center; } p { position: relative; top: 50%; margin-top: -1em; text-align: center; margin-top: -30px; } .font2{ font-size: 40px; } </style> </head> <body> <script> var $id = function(id) { return document.getElementById(id); }; var $classAll = function(c) { return document.getElementsByClassName(c); }; var AUDIO_EXT = (function(){ var ext = ""; var audio = new Audio(); if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; } else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; } return ext; })(); var AUDIO_LIST = { "okwave1": new Audio("sound1." + AUDIO_EXT), }; window.onload = function() { var eMenuList = $classAll("Box"); for (var i=0,len=eMenuList.length; i<len; ++i) { var eMenu = eMenuList[i]; eMenu.addEventListener("mouseover", function(){ var data = this.getAttribute("data"); AUDIO_LIST[data].play(); AUDIO_LIST[data] = new Audio( AUDIO_LIST[data].src ); }, false); } }; </script> <div class="Box" data="okwave1"><p class="font2">div=Box</p>ココは音が鳴ります。</div> <div class="sound1" data=""><p class="font2">div=sound1</p><p>ココも音を鳴らしたいです。<br />よろしくお願いします。</p></div> <div class="sound2" data=""><p class="font2">div=sound2</p><p>ココも音を鳴らしたいです。<br />よろしくお願いします。</p></div> </body> </html>

  • javascriptで困っています

    初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の1つの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); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。

このQ&Aのポイント
  • Win11PCにESETをインストールして2年以上経過しましたが、ノートンよりは動作が軽く気に入っています。
  • ESETの国内代理店のキャノンが丸ごと安心パックサポートをしているわけではなく、OEM事業として委託企業がESETやNECのPC等のサポートをしていることもネット情報から判明しました。
  • フィッシングサイトが多数あり、ESETがブロックするようにメールで依頼しても、サポート会社は確かな証拠がないとブロックできないと言います。Windows11にはDefenderがありますが、セキュリティーソフトも絶対ではないという意見もあります。どうすれば良いのでしょうか?
回答を見る