jQuery image zoom передний план

0

У меня есть тег с кучей эскизов изображений, каждый из которых помещен в свой собственный тег.

<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);
});

То, что я хотел бы сделать, показывает большую версию изображения, когда пользователь нажимает или наводит на изображение. То, что я до сих пор, я могу удвоить ширину и высоту изображения при нажатии, но это просто заставляет изображение "проливать" на него соседние изображения и частично лежит за ними. Это усугубляется тем фактом, что фоны изображений прозрачны.

Мне нужно, чтобы изображение перемещалось на передний план при щелчке (или зависании) и удалении прозрачности его фона.

Если это не очень большая работа, чтобы сделать что-то подобное, я бы предпочел написать свой собственный код для этого.

благодаря

Теги:
image

2 ответа

0
Лучший ответ

Хорошо, было несколько изменений, но скажите, если это соответствует тому, что вы ищете.

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, но это зависит от вас. Надеюсь это поможет!

Edit: Пробовал сделать его максимально динамичным. Вы можете, очевидно, изменить стили, как вам нужно. Надеюсь, это сработает для вас. Удачи!

Поделиться
  • 0
    Если что-то подобное не является действительно большой работой, я бы предпочел делать это с моим собственным кодом.
  • 0
    Это совершенно понятно, я буду возиться в скрипке на несколько и посмотреть, что произойдет.
Показать ещё 3 комментария
1

вы можете установить z-index на 1000 при наведении или на время, которое вам нравится

$(event.target).css("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/

ВЕРСИЯ SLIM БЫЛО НРАВИТСЯ

// 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;
}

вы также можете использовать позицию: относительная на вашем контейнере... надеюсь, что вы искали :) в противном случае вы можете искать анимацию, если хотите, чтобы изображения занимали место для просмотра.

Поделиться
  • 0
    .imagecontainer имеет float: left; и я предполагаю, что именно поэтому z-index не оказывает никакого влияния.
  • 0
    не могли бы вы опубликовать свой CSS? Я думаю, что решение простое, но мне нужно больше кода, чтобы увидеть, каково ваше поведение :)
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню