對圖像動畫的圖像jquery

我有一個水平無序的2個圖像列表。意圖是在不移動鄰居圖像的情況下讓懸停圖像變得更大（使用Jquery）。代碼如下：對圖像動畫的圖像jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <style type="text/css"> 
      ul#thumbs li { 
       display: inline; 
       list-style: none; 
      } 
      a img { 
       position: relative; 
       -webkit-border-radius: 20px; 
       border: 2px solid blue; 
      } 
      a img:hover { 
       -webkit-border-radius: 20px; 
       border: 2px solid yellow; 
      } 
     </style> 
    </head> 
    <body> 
    <ul id="thumbs"> 
     <li><a href="#"><img src="img/bono.jpg" width="420" height="300" border="none"/></a></li> 
     <li><a href="#"><img src="img/abstr.jpg" width="420" height="300" border="none"/></a></li> 
    </ul> 
     <script> 
     $('a img').mouseover(function(){ 
      $(this).delay(1500).animate({ 
       width: "630px", 
       height: "450px", 
      }, 1500); 
      $(this).css("z-index","1000"); 
      $(this).css("overflow","visible"); 
      $(this).css("position","absolute"); 
     }); 
     $('a img').mouseout(function(){ 
     $(this).animate({ 
      width: "420px", 
      height: "300px", 
     }, 500); 
     }); 
     </script> 
    </body> 
</html>

來源

2011-07-14 George

我想你想要的東西是一樣的東西this。

關鍵是玩邊際。

來源

2011-07-14 22:09:29 vinceh

day [9] FTW !!! ：d – algiecas

對圖像動畫的圖像jquery

回答

相關問題