<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .adbox{ width: 960px; height: 335px; margin: -335px auto 0; } .menubox{ width: 100%; height: 50px; background: #000; } .menu{ width: 960px; height: 50px; font-size: 14px; color: #fff; margin: 0 auto; line-height: 50px; font-weight: 700; padding-left: 20px; } .con{ width:960px; height: 500px; background: #ccc; margin: 0 auto; } body{ height: 5000px; } </style> <script type="text/javascript" src="./jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $('.adbox').animate({marginTop : 0},2000,function(){ setTimeout(function(){ $('.adbox').animate({marginTop : -335},2000); },3000) }); }) </script> </head> <body> <div class="adbox"><img src="./images/ad.jpg" alt="" /></div> <div class="menubox"> <div class="menu">首页</div> </div> <div class="con"></div> </body> </html>