jQuery圖像縮放前景

Question

我有一堆圖像縮略圖，每個放置在自己的標籤中的標籤。

<div class='imageframe'> 
    <div class='imagecontainer'> 
     <img class='clipartimage' src='myimageurl> 
    </div> 
    <div class='imagecontainer'> 
     <img class='clipartimage' src='myimageurl2> 
    </div> 
</div> 

我的jQuery代碼至今：

$(".imagecontainer").click(function (event) { 
    $(event.target).width(100); 
    $(event.target).height(100); 
}); 

什麼，我想這樣做，是顯示圖像的放大版本，在用戶點擊時，或將鼠標懸停在圖片。 到目前爲止，我能夠在單擊圖像時將圖像的寬度和高度加倍，但這會使圖像「溢出」到相鄰的圖片中，並且部分位於這些圖片的後面。由於圖片背景是透明的，這使情況變得更糟。

我需要的是當圖片被點擊（或徘徊）時移動到前景，並移除背景的透明度。

除非做這樣的工作真的很大，否則我寧願爲它編寫自己的代碼。

感謝

Answer 1

好吧，有幾個變化，但告訴我，如果這是你所尋找的線。

http://jsfiddle.net/wrxsti85/GqwbY/

var $target; 
var targetWidth; 
var targetHeight; 
var targetPos; 
var isAnimated; 
$(".imagecontainer").hover(function(){ 
    $target = $('.clipartimage', this); 
    if(!isAnimated){   
     targetPos = $target.position(); 
     targetWidth = $target.width(); 
     targetHeight = $target.height(); 
     isAnimated = true; 
    } 
    $target.stop().animate({'height':'200px', 'width':'200px', 'left': '-=' + (targetWidth/2), 'top': '-=' + (targetHeight/2) }, 200).css({ 
     'background': '#fff', 
     'border':'solid 1px #000', 
     'border-radius': '5px', 
     'box-shadow': '0px 6px 10px rgba(0,0,0,.8)', 
     'z-index': '2' 
    }); 
}, function(){ 
    $target.stop().animate({'height':targetWidth, 'width':targetHeight, 'left': targetPos.left, 'top': targetPos.top }, 200, function(){ isAnimated = false; }).css({ 
     'background': 'transparent', 
     'border':'solid 0px #000', 
     'border-radius': '0px', 
     'box-shadow': '0px 0px 0px rgba(0,0,0,.8)', 
     'z-index': '1' 
    }); 
}); 

我認爲它實際上看起來沒有邊界/ BG更好一點，但它給你。希望這可以幫助！

編輯：試圖使其儘可能動態。無論你需要什麼，你顯然可以改變樣式。希望這對你有用。祝你好運！

Answer 2

您可以在懸停或在一段時間你喜歡

$(event.target).css("z-index","1000"); 

猜測這應該是這樣的，如果IM介意的Z-index設置爲1000吧:)

$(".clipartimage").on('click',function() { 
    $(this).width(100); 
    $(this).height(100); 
    $(this).css("z-index","1000"); 
}); 

我爲你做了懸停功能，保留舊圖像尺寸

// Vars to get old size back 
var oldH = 0; 
var oldW = 0; 
$(".imagecontainer").hover(function() { 
    // Function for Hover Element 
    oldH = $('.clipartimage',this).height(); 
    oldW = $('.clipartimage',this).width(); 
    $('.clipartimage',this).width(300); 
    $('.clipartimage',this).height(200); 
    $('.clipartimage',this).css('z-index', 1000); 

}, function(){ 
    // Function for hover out 
    $('.clipartimage',this).width(oldW); 
    $('.clipartimage',this).height(oldH); 
    $('.clipartimage',this).css('z-index', 0); 
}); 

這裏是一個演示http://jsfiddle.net/rfCkD/

修身版會是什麼樣

// Vars to get old size back 
var oldH = 0; 
var oldW = 0; 
$(".imagecontainer").hover(function() { 
    // Function for Hover Element 
    oldH = $('.clipartimage',this).height(); 
    oldW = $('.clipartimage',this).width(); 
    $('.clipartimage',this).width(300).height(200).css('z-index', 1000); 
}, function(){ 
    // Function for hover out 
    $('.clipartimage',this).width(oldW).height(oldH).css('z-index', 0); 
}); 

重要： 在你的情況賽義德您imagecontainer有：

.imagecontainer 
{ 
    float:left; 
} 

所以如果你想要你的圖片聽的z-index，你的圖像需要：你的容器上相對... 我希望這就是你要找的:)否則，你可能會尋找動畫：

.clipartimage 
{ 
    position:relative; 
} 

你也可以使用位置如果你想讓圖像騰出空間來觀看。