jquery - 带有 MouseOver Zoom 的垂直旋转木马

Question

在我的垂直幻灯片放映中，我希望在将鼠标移到上方时缩小图像。这是有效的，除了图像位于溢出的容器中:隐藏。

这是我的 fiddle :http://jsfiddle.net/Xxahy/129/

缩放图像的 CSS:

.cycle-carousel-wrap > img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5,1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    box-shadow: 0 0 10px #000;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
}

幻灯片的 HTML 代码:

<script>
    $.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx="carousel" data-cycle-timeout="1000" data-cycle-pause-on-hover="true" data-cycle-carousel-visible="3" data-cycle-carousel-vertical="true">        
    <img src="http://lorempixel.com/output/sports-q-c-100-100-1.jpg" />
    <img src="http://lorempixel.com/output/sports-q-c-100-100-2.jpg" />
    <img src="http://lorempixel.com/output/sports-q-c-100-100-3.jpg" />
    <img src="http://lorempixel.com/output/sports-q-c-100-100-5.jpg" />
</div>

有没有办法在 overflow:hidden 容器上方显示图像？

Answer 1

由于 DIV 可能无法调整大小，所以现在可以使用纯 css 进行调整。所以我自己找到了解决方案，看看这个 fiddle :

http://jsfiddle.net/Xxahy/130/

我在现有图像的正上方(以及 DIV 上方)创建了一个新图像:

$( ".slideshow img" ).hover(
    function() {
        $( ".slideshow" ).cycle("pause");
        if (typeof($img) == 'object') {$img.fadeOut().remove();}
        var $x = $(this).offset().left,
            $y = $(this).offset().top,
            $link = $( this ).parent().attr("data-link");
        $img = $( "<img>" );
        $img.attr( "src", $(this).attr("src"));
        $img.css({ position: "absolute", top: $y, left: $x, display: "none" });
        $( ".slideshow" ).parent().append($img);
        $img.wrap( "<a href=\"" + $link + "\" target=\"_BLANK\" rel=\"nofollow\"></a>").show().addClass( "supersized" ).mouseout( function() { 
            $(this).fadeOut().remove(); 
            $( ".slideshow" ).cycle("resume");
        });
    }
);

这是一种 hack，但它有效 :-)