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

<!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; position: relative; overflow: hidden; float: left; } .mi .bot{ width: 234px; height: 76px; background: #FF6700; position: absolute; top: 300px; left: 0; opacity: 0; } </style> </head> <body> <div class="mi"> <div class="bot"></div> </div> <div class="mi"> <div class="bot"></div> </div> <div class="mi"> <div class="bot"></div> </div> <div class="mi"> <div class="bot"></div> </div> <div class="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(){ $(this).animate({'top':'-5px'},300); $(this).find('.bot').animate({'top':'224px','opacity':1},300); }) $(".mi").mouseleave(function(){ $(this).animate({'top':0},300); $(this).find('.bot').animate({'top':'300px','opacity':0},300); }) </script> </body> </html>