Question

我有一个使用jQuery UI排序的图像查看器/放大器。当存在相当多的图像时，窗口变得可滚动以便容纳它们。在这种情况下，当从一个地方拖到另一个地方时，图像是不稳定的。出现的滚动条也会跳转。

除了IE之外，我曾经使用过的原始CSS。然后我生成了一些新的CSS，它现在适用于所有浏览器，但我必须保持观察者的区域相对较小，如果有很多图像（即一些被完全隐藏并且拖动变得困难），这是不理想的。它似乎只发生在观察者的实际区域超出窗口边界时。我对CSS或jQuery的解决方案持开放态度。尝试CSS第一个b / c，这是我所知道的更好。谢谢！

首先，这是jQuery：

    $(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {

    $("#gallery, #viewer").sortable({
        connectWith: ".images",
        items: "div",
        forcePlaceholderSize: true,
        forceHelperSize: true,
        receive: function (event, ui) {
            switch (ui.item.parent().attr("id")) {
                case "viewer":
                    ui.item.animate({ height: "250px", width: "250px" });
                    break;
                case "gallery":
                    ui.item.animate({ height: "96px", width: "96px" });
                    break;
            }
        }

    }).disableSelection();

}

else {
    $("#gallery, #viewer").sortable({
        connectWith: ".images",
        items: "div",
        forcePlaceholderSize: true,
        forceHelperSize: true,
        receive: function (event, ui) {
            switch (ui.item.parent().attr("id")) {
                case "viewer":
                    ui.item.css({ height: "525px", width: "auto" });
                    break;
                case "gallery":
                    ui.item.css({ height: "150px", width: "auto" });
                    break;
            }
        }

    }).disableSelection();
}

}）;

除了IE之外不会跳转的CSS：

        html, body {min-height:100%;}
    .hangingIndent{ padding-left:22px; text-indent:-22px;}
    #gallery {width: 95%; min-height: 100px; overflow:auto; *overflow:inherit; margin-bottom: 10px;}
    *html #gallery {height: 100px; }
    #gallery .image {float: left; width: auto; height: 150px; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;}
    #gallery .image img { width: auto; height: 148px; border: solid 1px black; cursor: move; }
    #viewer {width: 95%; min-height: 250px; background-color:#A3A3A3; padding: 1%; overflow:auto; *overflow:inherit;}
    * html #viewer {height: 250px;}
    #viewer .image {float: left; height: 325px; width: auto; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;}
    #viewer .image img {width: auto; height: 525px; border: solid 3px white; cursor: move; }
    #viewer h4 {line-height: 1em; margin: 0 0 0.4em; color:#000;}

所有可用的CSS，但放大的图像都在可滚动区域内：

        html, body {min-height:100%;}
    .hangingIndent{ padding-left:22px; text-indent:-22px;}
    #gallery
    {
        width: 95%;
        min-height: 100px;
        height: 100px;
        overflow: auto;
        margin-bottom: 10px;
    }
    #gallery {}
    #gallery .image {float: left; width: auto; height: 150px; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;}
    #gallery .image img { width: auto; height: 148px; border: solid 1px black; cursor: move; }
    #viewer
    {
        width: 95%;
        height: 250px;
        min-height: 250px;
        background-color: #A3A3A3;
        padding: 1%;
        overflow: auto;
    }
        #viewer .image
        {
            float: left;
            height: 325px;
            width: auto;
            padding: 0;
            margin-right: 10px;
            text-align: center;
            background-color: #e2e2e2;
                border:none;
        }
            #viewer .image img
            {
                width: auto;
                height: 525px;
                border: solid 3px white;
                cursor: move;
            }
    #viewer h4 {line-height: 1em; margin: 0 0 0.4em; color:#000;}

以及HTML：

    <div id="gallery" class="images">
<div class="ui-corner-tr image"><img src="../../../../../images/Fig267b.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9a.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9b.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9c.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/xray1.JPG" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/xray2.JPG" alt="" title="" /></div>
</div>
<div id="viewer" class="images">
<h4>Drag the images to the area above to remove them from the viewing tool.</h4>
</div>

Answer 1

尝试添加overflow：hidden;到父元素。我不确定这是否适用于这种情况，但它经常摆脱“闪烁”效应。

CSS或jQuery修改，以防止屏幕闪烁

1 个答案: