代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px} #tp{ 900px; height:400px; overflow:hidden} #img{ position:relative; } </style> </head> <body> <input type="button" value="飞入" onclick="feiru()" /> <input type="button" value="飞出" onclick="feichu()" /> <div id="tp"> <img id="img" style="top:-400px; left:-900px" src="tooopen_sl_171740953457.jpg" width="900" height="400px" /> </div> <script type="text/javascript"> function feiru() { fei(); } function fei() { var img = document.getElementById("img"); var topstr = img.style.top; var top = parseInt(topstr.substr(0,topstr.length-2))+4; img.style.top=top+"px"; var leftstr = img.style.left; var left = parseInt(leftstr.substr(0,leftstr.length-2))+9; img.style.left = left+"px"; if(top<-100) { window.setTimeout("fei()",10); } else if(top>=-100 && top<0) { window.setTimeout("fei()",30); } } </script> </body> </html>
点击飞入后运行结果：
最后结果：
以上是飞入效果，飞出效果类似，只是改变图片初始位置和最后位置。