Question

在我的垂直幻灯片放映中，我希望在将鼠标移动时缩小图像。这是有效的，除了图像位于具有overflow：hidden。

的容器中

缩放图像的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>

有没有办法在溢出：隐藏容器上方显示图像？

Answer 1

由于DIV可能无法调整大小，现在有一种方法可以用纯粹的CSS进行调整。所以我自己找到了解决方案，看看这个小提琴：

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

这是一种黑客攻击，但它有效： - ）

带MouseOver Zoom的垂直转盘

1 个答案: