Q&A
仕様を提示して下さい
前提・実現したいこと
JQueryを使わず動きのある線を引きたいです。
初心者なので初歩的なミスかと思いますが教えていただけますでしょうか。
発生している問題・エラーメッセージ
ウィンドウサイズの2倍の幅になり、右端に出てしまう。 動きがついていない。
該当のソースコード
Javascript
1<script> 2var timer=setInterval('horizon()', 3); 3var winW=innerWidth; 4 5function horizon(){ 6 for(var xPosition=0;xPosition<=winW;xPosition++){ 7 document.getElementById('box').style.width=xPosition+'px'; 8 document.getElementById('box').style.left=xPosition+'px'; 9 } 10} 11</script> 12<style> 13#box{ 14 width: 0; 15 height: 100px; 16 background: #000; 17 position: absolute; 18} 19</style> 20</head> 21<body> 22<div id="box"></div> 23</body>
回答2件
0
ベストアンサー
ざっくりやるとこんな感じです
CSS
1body{ 2margin:0px; 3padding:0px; 4} 5#box{ 6height: 100px; 7background-Color:#000000; 8position: absolute; 9}
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 var xWidth=0; 3 var xRange=10; 4 var timerId=setInterval(function(){ 5 if(xWidth>=innerWidth) clearInterval(timerId); 6 document.getElementById('box').style.width=xWidth+'px'; 7 xWidth+=xRange; 8 }, 3); 9});
html
1<body> 2<div id="box"></div> 3</body>
投稿2018/02/15 04:59
総合スコア114767
0
投稿2018/02/15 04:41
総合スコア7804
あなたの回答
tips
プレビュー
