Flickr懸停照片

我試圖創建一張照片列表，當你將鼠標懸停在它們上面時，它們應該放大。但是，由於某種原因，我無法讓他們放大。我在頂部添加了一張照片，放大的同一班，所以我很困惑。Flickr懸停照片

<!doctype html> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 

<!-- initalisation 
var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=8489f42538c845c42b590276f04d6d5b&per_page=15"; 
var tags = $("input[type='radio'][name='radio']:checked").val(); 
getPictures(); 
var src; 

<!-- handles the radio button input then calls getPictures 
$("input[name='radio']").change(function(){ 
    tags = $("input[type='radio'][name='radio']:checked").val(); 
    $('#images').empty(); 
    getPictures(); 
}); 

<!-- jQuery function to get the flickr photos 
function getPictures() 
{ 
    $.getJSON(url + "&tags=" + tags + "&format=json&jsoncallback=?", function(data){ 
     $.each(data.photos.photo, function(i,item){ 
      <!-- return 3 columns 
      if(i % 3 == 0 && i != 0) 
       $("#images").append("<br />"); 

      src = "http://farm"+ item.farm +".staticflickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg"; 
      var image = $("<img class='resize'/>").attr("src", src); 
      var imagelink = "http://www.flickr.com/photos/" + item.owner + "/" + item.id + "/"; 
      var link = $("<a>").attr("href", imagelink); 
      link.append(image); 
      $("body").append(link); 

     }); 
    }); 

} 

$(document).ready(function(){ 
    $('.resize').mouseenter(function() 
      { 
       $(this).animate({width: "30%", height: "30%"}, 'slow'); 
      }); 

    $('.resize').mouseleave(function() 
    { 
     $(this).animate({width: "10%"}, 'fast'); 
    }); 
}); 

</script> 
</head> 
<body> 
<form> 
    <input type="radio" name="radio" value="HTML5"> HTML5 Apps<br> 
    <input type="radio" name="radio" value="Hybrid" checked> Hybrid Apps<br> 
    <input type="radio" name="radio" value="Native"> Native Apps<br> 
</form> 
<img src="http://www.lindanieuws.nl/cache/img/c-500-280/wp-content/uploads/2014/09/hh-41198294-e1411643634795.jpg" class="resize"/> 
<div id="images" position="absolute"></div> 



</body> 
</html>

來源

2016-02-26 Cake

您動態插入您的.resize圖像，這意味着他們出現後加載的頁面。爲了收聽活動，請使用以下內容：

$('body').on('mouseenter', '.resize', function(){ 
    ... 
})

對於mouseleave也是如此。

來源

2016-02-26 13:19:31

啊，太棒了，修復了它。謝謝！ – Cake

Flickr懸停照片

回答

相關問題