顶部滑出大图效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } img{ display: block; margin: 0 auto; } #top_tu{ margin-top: -460px; } </style> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 他margin-top本来是-460的,设成0 3000毫秒时间让它慢慢下来 $('#top_tu').animate({'margin-top':'0px'},3000,function(){ //// 用一个定时炸弹来控制它多等一下,延迟才执行回调函数 // setTimeout(function(){ //// 下来之后,结束上面的:用一个回调函数马上反应 // $('#top_tu').animate({'margin-top':'-460px'},3000); // },3000) // 有更简单的方法: delay()延迟 delay一般写在运动之前，表示让后面的运动延迟多久执行 $('#top_tu').delay(3000).animate({'margin-top':'-460px'},3000); }); }) </script> </head> <body> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903081552011069126353.jpg" id="top_tu"/> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903081552011069685244.jpg"/> </body> </html> 代码效果点上面的（运行代码）来看
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知