Jquery鼠標懸停按鈕圖標動態變化效果
阿新 • • 發佈：2017-07-06
absolut animate nbsp mat doc code -h solid position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery仿淘寶icon動畫圖標特效</title> </head> <style type="text/css"> *{padding: 0;margin: 0;} #move{ margin: 40px auto; width: 298px; height: 174px; border: 1px solid #ccc; background-color: #F0F0F0;} #move a{ display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; position: relative; padding-top: 40px; color:#9c9c9c; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; } #move a i{ position: absolute; top: 12px; left: 0; display: inline-block; width: 100%; text-align: center; filter:alpha(opacity=100); opacity: 1; } #move a:hover{ color: #f00; } #move img{ border:none; width: 50%; } </style> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(‘#move a‘).mouseenter(function(){ $(this).find("i").animate({top:‘-25px‘,opacity:‘0‘},300,function(){ $(this).css({top:‘25px‘}); $(this).animate({top:‘12px‘,opacity:‘1‘},600) }); }) }) </script> <body> <div id="move"> <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu3.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu4.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a> </div> </body> </html>
Jquery鼠標懸停按鈕圖標動態變化效果