JavaScriptでのアニメーション gihyojp Follow 2011-03-14 00:02:38 License: MIT License Fork26 Fav0 View8816 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 21 lines HTML 2 lines CSS 10 lines JavaScriptでのアニメーション jQuery v1.5.1 var box = document.getElementById('box'); $('#start').click(function() { // topの初期値を設定 var top = 0; // タイマー処理。1ms置きに実行 var timer = setInterval(function() { // topの値を1増やす top += 10; // topの値を適用する box.style.top = top + 'px'; // topの値が300以上になったらタイマーをクリアする if (top > 300) { clearInterval(timer); } }, 1); }); <p><button id='start'>start</button></p> <div id='box'></div> JavaScriptでのアニメーション #box { width: 100px; height: 100px; border: 1px solid #333; background: #EEE; position: relative; top: 0; } var box = document.getElementById('box'); $('#start').click(function() { // topの初期値を設定 var top = 0; // タイマー処理。1ms置きに実行 var timer = setInterval(function() { // topの値を1増やす top += 10; // topの値を適用する box.style.top = top + 'px'; // topの値が300以上になったらタイマーをクリアする if (top > 300) { clearInterval(timer); } }, 1); }); <p><button id='start'>start</button></p> <div id='box'></div> #box { width: 100px; height: 100px; border: 1px solid #333; background: #EEE; position: relative; top: 0; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/6BKD/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gihyojp/lesson04_js_animation" title="JavaScriptでのアニメーション">JavaScriptでのアニメーション - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked forked: JavaScriptでのアニメーション Tetsurou.Uno.. 00 31views 22/2/10 test Light 00 84views 3/10/10 forked: JavaScriptでのアニメーション yueliang 00 59views 28/2/10 forked: JavaScriptでのアニメーション Takafumi.Tam.. 00 47views 22/2/10 1 2 3 4 5 6 7 8NEXT>>
