2012-11-06 74 views
3

我有一個圖像瀏覽/放大機使用jQuery UI排序工作。當有相當多的圖像時,窗口變得可以滾動以適應它們。在這種情況下,當從一個地方拖到另一個地方時,圖像會變得不平穩。出現的滾動條也會跳轉。CSS或jQuery的修改,以防止屏幕閃爍

原來的CSS我在一切,但IE瀏覽器的工作。然後,我產生了一些新的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> 

回答

0

嘗試增加溢出:隱藏;到父元素。我不知道這是否會在這種情況下工作,但它往往擺脫的「閃爍」的效果。