javascript - 在不影响布局的情况下使用 jquery 扩大/缩小图片库

Question

我得到了一个组织为 <ul> 的图片库.所有图像都在 <li>元素，当我将鼠标移到其中一张图片上时，它应该会增长以向用户提供视觉反馈。问题是，当我只是使用 animate() 更改图像的大小时，其他图片将被推到一边，因为调整大小后的图像会占用更多空间。

因此我继续克隆图像元素，将其 float 在原始图像上，然后调用 animate。随之而来的问题是，一旦弹出克隆的图像，就会调用 onMouseOut() 。所以我需要一个嵌套的 hover() 函数，这就是事情变得复杂的地方。

我有两个错误，但我无法找出导致它们的原因。第一个是，animate() 不会让克隆图像超出其原始图像的右边界，第二个是，当我在画廊上快速移动鼠标时，我会出现奇怪的增长/收缩行为。

html:

<ul id="gallery1" class="gallery_container">
    <li class="frame">
    <a href=""><img src="pic1.jpg" class="picture" /></a></li><li class="frame">
    <a href=""><img src="pic2.jpg" class="picture" /></a></li><li class="frame">
    <a href=""><img src="pic3.jpg" class="picture" /></a></li>
</ul> 

CSS:

.picture
{
    height: 200px;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.frame
{
    display: inline-block;
    position: relative;
    margin: 0px;
    margin-right:8px;
    padding: 0px;
}

.frame a
{
    padding: 0px;
    margin: 0px;
} 

.gallery_container
{
    height: 200px;
    width: 150%;
    position: relative;
    top: 4px;
    padding: 0px;
    margin: 0px;
}

最后是让我头疼的代码:

$(document).ready(function()
{
var zooming = false;
var zoom = 4;
var speed_zoom = 100;

$('.gallery_container li a').hover(function(element)
{
    // disable zooming to prevent unwanted behavior
    if(zooming) return;

    zooming = true;

    $(this).after( $(this).clone(false) );
    $(this).next().attr('id', 'focus_frame');
},
function(element) // when the new element pops up, onmouseout is triggered, since the focus_frame is in front of the image
{
    $(this).next().hover(function(element)
    {
        // we need to re-position the element in the dom-tree, since it needs to grow out of a container with overflow: hidden
        $('#focus_frame img').animate({'left' : zoom * -1, 'top' : zoom * -1, 'height' : 200+(zoom*2), 'width' : $('#focus_frame img').outerWidth() + (zoom*2)}, speed_zoom);
    },
    function(element)
    {
        $(this).remove();
        zooming = false;
    });
});
});

Answer 1

var $doc=$(document.body)
$doc.on({
"mouseenter" : function (e) {

    $doc.find("> .gallery_clone").remove();

    var $i=$(this).parent();
    $i.pos = $i.offset();
    $i.clone()
        .addClass("gallery_clone "+$i.parent().parent().attr("class"))
        .css({
            top:(Math.round($i.pos.top)-3)+"px"
            ,left:(Math.round($i.pos.left)-3)+"px"
            ,width:$i.width()
            }).appendTo($doc);

    }
},
  " ul > li > img"
).on ({

    "mouseleave" : function (e) {
       $(this).remove();
    },"> .gallery_clone");

在 css .gallery_clone 中是 position:absolute

然后我通过 css 为 .gallery_clone:hover 设置动画，但我想你也可以在 jquery 中完成，在 .gallery_clone 上添加一个 mouseenter 事件编辑:我从字面上复制/粘贴了我的脚本，因此您必须将此代码调整为您的 html

nb: 试一试 css 动画，即使旧的 ie 不会动画，也是值得的； (我还为同一个画廊制作了几乎纯 css 的灯箱效果 - 稍后发布，现在还没有准备好发布插件抱歉)

nb2:那部分 "+$i.parent().parent().attr("class") 是因为在 cms 中他们可以选择图库背景颜色，所以将该类添加到克隆的背景颜色和其他画廊样式(即您不需要它)