suicide-boy Posted July 29, 2007 Share Posted July 29, 2007 Righteo! I'm starting to get to work on a site for me and a mates music projects but it's gonna be split. As an enter page what I wanna do is when the page opens I want the logo image to fly from the left to the center of the screen above a link to the page. If it doen in JS or by the <embed> tag? Thanks Link to comment https://forums.phpfreaks.com/topic/62335-image-fly-to-screen-center/ Share on other sites More sharing options...
php_tom Posted August 6, 2007 Share Posted August 6, 2007 Here's an HTML/JavaScript page that should do the job: <html> <head> <script type='text/javascript'> var t, begin, end, curr, obj; function start() { obj = document.getElementById('img1'); var img_width = 800; var win_width = document.body.offsetWidth; begin = -img_width; end = (win_width/2)-(img_width/2); curr = begin; obj.style.left = curr+"px"; obj.style.visibility = "visible"; t = setInterval("moveLeft();", 10); } function moveLeft() { if(curr>=end) clearInterval(t); else { curr+=2; obj.style.left = curr+"px"; } } </script> </head> <body> <img src='image.jpg' id='img1' onload='start();' align='center' style='visibility:hidden; position:absolute;' /> </body> </html> The variables you need to change are img_width and the src of the img tag. Hope that helps... Link to comment https://forums.phpfreaks.com/topic/62335-image-fly-to-screen-center/#findComment-316394 Share on other sites More sharing options...
php_tom Posted August 6, 2007 Share Posted August 6, 2007 Oops! It didn't work in IE... but this should: <html> <head> <script type='text/javascript'> var t, begin, end, curr, obj; function start() { obj = document.getElementById('img1'); var img_width = 800; var win_width = document.body.offsetWidth; begin = -img_width; end = (win_width/2)-(img_width/2); curr = begin; obj.style.left = curr+"px"; obj.style.visibility = "visible"; t = setInterval("moveLeft();", 10); } function moveLeft() { if(curr>=end) clearInterval(t); else { curr+=2; obj.style.left = curr+"px"; } } </script> </head> <body onload='start();'> <img src='image.JPG' id='img1' align='center' style='visibility:hidden; position:absolute;' /> </body> </html> Link to comment https://forums.phpfreaks.com/topic/62335-image-fly-to-screen-center/#findComment-316415 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.