圖片翻轉過來，需要動畫幫助jquery

我已經分別測試了兩個功能，但是當我將它們放在一起時，它們不起作用。一種是圖像滾動，允許用戶鼠標懸停並查看較大的圖像。另一種是簡單的動畫，將圖像邊框周圍的橙色變爲黑色。我還想知道是否有人對如何讓圖像在縮小圖像時不會失去像素化有任何想法。這是動態完成的，所以我無法爲每個圖像創建兩個圖像。提前致謝。這是我的代碼。該頁面最終將擁有多達250行的圖像。圖片翻轉過來，需要動畫幫助jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<style type="text/css"> 
.container { 
    width: 400px; 
    position: absolute; 
    margin-top:40px; 
    margin-left:40px; 
} 
ul.thumb { 
    float: left; 
    list-style: none; 
    width: 400px; 
} 
ul.thumb li { 
    float: left; 
    position: relative; 
    width: 80px; 
    height: 60px; 
} 
ul.thumb li img { 
    width: 80px; height: 60px; 
    position: absolute; 
    left: 0; top: 0; 
    -ms-interpolation-mode: bicubic; 
} 

.images { 
    border: 5px solid; 
} 
</style> 

</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://ditio.net/wp-content/uploads/2010/01/jquery-resize.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 

$(".images").each(function setAnim() { 
      $(this).  
        animate({ 
         borderTopColor:'orange', 
         borderRightColor:'orange', 
         borderBottomColor:'orange', 
         borderLeftColor:'orange', 
         }, 1000). 
         animate({ 
         borderTopColor:'black', 
         borderRightColor:'black', 
         borderBottomColor:'black', 
         borderLeftColor:'black'}, 1000, setAnim); 
         }); 

}); 
//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 
    $(this).css({'z-index' : '10'}); 
    $(this).find('img').addClass("hover").stop() 
     .animate({ 
      marginTop: '-80px', 
      marginLeft: '-80px', 
      top: '50%', 
      left: '50%', 
      width: '160px', 
      height: '120px', 
     }, 200); 

    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).find('img').removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '0', 
      left: '0', 
      width: '80px', 
      height: '60px', 
     }, 400); 



}); 
</script> 
</head> 

<body> 
<div class="container"> 
<ul class="thumb"> 

    <li><a href="test.html"><img src="images/desert.jpg" class="images" alt="" /></a></li> 
    <li><a href="test.html"><img src="images/flower.jpg" class="images" alt="" /></a></li> 
    <li><a href="test.html"><img src="images/jellyfish.jpg" class="images" alt="" /></a></li> 


</ul> 
<ul class="thumb"> 

    <li><a href="test.html"><img src="images/desert.jpg" class="images" alt="" /></a></li> 
    <li><a href="test.html"><img src="images/flower.jpg" class="images" alt="" /></a></li> 
    <li><a href="test.html"><img src="images/jellyfish.jpg" class="images" alt="" /></a></li> 


</ul> 

</div> 


</body> 
</html>

來源

2011-09-21 user915958

試試這個，我也注意到你有幾個commars，你應該不會有：

$(function() { 

    $(".images").each(function() { 

     $(this).animate({ 
      borderTopColor: 'orange', 
      borderRightColor: 'orange', 
      borderBottomColor: 'orange', 
      borderLeftColor: 'orange' 
     }, 1000).animate({ 
      borderTopColor: 'black', 
      borderRightColor: 'black', 
      borderBottomColor: 'black', 
      borderLeftColor: 'black' 
     }, 1000); 
    }); 

}); 

//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 

    $(this).css({'z-index': '10'}); 
    $(this).find('img').addClass("hover").stop().animate({ 
     marginTop: '-80px', 
     marginLeft: '-80px', 
     top: '50%', 
     left: '50%', 
     width: '160px', 
     height: '120px' 
    }, 200); 

}, function() { 

    $(this).css({'z-index': '0'}); 
    $(this).find('img').removeClass("hover").stop().animate({ 
     marginTop: '0', 
     marginLeft: '0', 
     top: '0', 
     left: '0', 
     width: '80px', 
     height: '60px' 
    }, 400); 

});

來源

2011-09-21 08:52:03 daryl

圖片翻轉過來，需要動畫幫助jquery

回答

相關問題