javascript - Changing a div attribute using a function? -
i not sure why move function, not changing style.left or style.top attributes of 'toy'
any tips, or general information/links on how animate div? i'm pulling hair out on here. :)
class="snippet-code-js lang-js prettyprint-override">var ref; var timer; var velocity = 50; var deltax = 5; var deltay = 5; var left = 0; var top = 0; //var movex = math.random() * velocity; //var movey = math.random() * velocity; function init() { alert("in init fucntion"); ref = document.getelementbyid("toy"); alert("ref = " + ref.valueof()); timer = setinterval(move, 50); } function move() { alert("called move"); var left = parseint(ref.style.left); var top = parseint(ref.style.top); alert("left = " + left.valueof() + " top = " + top.valueof()); left += 5; top += 5; alert("left =" + left.valueof() + "top = " + top.valueof()); ref.style.left += left; ref.style.top += 5; alert("ref.style.left = " + ref.style.left.valueof() + " ref.style.top = " + ref.style.top.valueof()); ref.style.left = (left + deltax) % posend; } var posend = 0; var objwidth = 100; if (window.innerwidth) { posend = window.innerwidth } else if (window.document.body.clientwidth) { posend = window.document.body.clientwidth } class="snippet-code-html lang-html prettyprint-override"><body onload="init()"> <div style="width: 100px; height: 100px; position:absolute; left: 0px; top: 0px;" id="toy"> <img src="http://images.all-free-download.com/images/graphiclarge/mouse_clip_art_6054.jpg" style="max-height: 100%; max-width: 100%;"> </div>
you need specify units position in. example, style.left = 10 won't work - need style.left = '10px';
here simplified version of move() function showing this:
function move() { var left = parseint(ref.style.left); var top = parseint(ref.style.top); left += 5; top += 5; ref.style.left = left + 'px'; ref.style.top = top + 'px'; } and working snippet:
class="snippet-code-js lang-js prettyprint-override">var ref; var timer; var velocity = 50; var deltax = 5; var deltay = 5; var left = 0; var top = 0; function init() { ref = document.getelementbyid("toy"); timer = setinterval(move, 500); } function move() { var left = parseint(ref.style.left); var top = parseint(ref.style.top); left += 5; top += 5; ref.style.left = left + 'px'; ref.style.top = top + 'px'; } var posend = 0; var objwidth = 100; if (window.innerwidth) { posend = window.innerwidth } else if (window.document.body.clientwidth) { posend = window.document.body.clientwidth } class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> </head> <body onload="init()"> <div style="width: 100px; height: 100px; position:absolute; left: 0px; top: 0px;" id="toy"> <img src="http://images.all-free-download.com/images/graphiclarge/mouse_clip_art_6054.jpg" style="max-height: 100%; max-width: 100%;"> </div> </body> </html>
javascript setinterval
No comments:
Post a Comment