11.仿小米商品展示效果 · 程序员开发笔记

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #mi{ width: 234px; height: 300px; border: 1px solid black; margin: 30px auto; position: relative; overflow: hidden; } #mi .bot{ width: 234px; height: 76px; background: #FF6700; position: absolute; top: 300px; left: 0; opacity: 0; } </style> </head> <body> <div id="mi"> <div class="bot"></div> </div> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#mi").mouseenter(function(){ $("#mi").animate({'top':'-5px'},300); $("#mi .bot").animate({'top':'224px','opacity':1},300); }) $("#mi").mouseleave(function(){ $("#mi").animate({'top':0},300); $("#mi .bot").animate({'top':'300px','opacity':0},300); }) </script> </body> </html>