幻燈片彈出時內容移動

Question

當我的幻燈片顯示時，左側的內容變爲中間位置的方式有什麼辦法嗎？當您點擊右側的圖片時，幻燈片會顯示出來。有關這方面的任何幫助？

這個

​​

我使用這個js腳本：

function toggleDiv(divNum) { 

     $("#close").hide(); 
     $(".slide").animate({ 
      right: '-400' 
     }, 350); 
     if ($("#div" + divNum)) { 

      $("#div" + divNum).animate({ 
       right: '0' 
      }, 350, function() { 
       $("#close").show(); 
      }); 
     } 
    } 

    $(document).ready(function() { 
     $("#close").on("click", function(e) { 
      $(".slide").animate({ 
       right: '-400' 
      }, 350); 
      $(this).hide() 
     }) 

    }) 

這是我的CSS

.slide { 
    width: 400px; 
    height: 100%; 
    position: absolute; 
    right: -400px; 
    top: 0; 
    background: #6b4788; 
} 

#right-content { 
    position: absolute; 
    right: 0; 
    top: 0; 
    overflow: hidden; 
    width: 400px; 
    height: 100%; 
} 

#close { 
    position:absolute; 
    right:10px; 
    top:10px; 
    z-index:10; 
    display:none; 
} 

Html here：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button onClick="toggleDiv(1)">Try it 1</button> 
<button onClick="toggleDiv(2)">Try it 2</button> 
<button onClick="toggleDiv(3)">Try it 3</button> 

<div id="right-content"> 
    <div id="close">X</div> 
    <div class="slide" id="div1">content 1</div> 
    <div class="slide" id="div2">hey I'm content 2</div> 
    <div class="slide" id="div3">Now it's content 3</div> 
<div> 

謝謝。

Answer 1

注意，中心div的寬度由CSS（100％-200px）來計算和它的annimation通過使用CSS過渡和添加設置/自定義刪除類到該div：

.width-slide { 
    width: calc(100% - 400px) !important; 
} 

婁可以找到一個完整的例子：

function toggleDiv(divNum) { 
 
    //removing px word from width size 
 
    if(slideWidth) 
 
     slideWidth = slideWidth.replace("px",""); 
 
    else slideWidth=200; 
 
    
 
    $("#close").hide(); 
 
    $("#center-content").removeClass("width-slide"); 
 
    $("#right-content").animate({right:-slideWidth},350, 
 
    function(){ 
 
     $("#center-content").addClass("width-slide"); 
 
     $(".slide").hide(); 
 
     if($("#div"+divNum)) { 
 
     $("#div"+divNum).show(); 
 
     } 
 
     $("#right-content").animate({right:'0'},350, 
 
     function(){ 
 
     $("#close").show(); 
 
      
 
     }); 
 
    }); 
 
} 
 
var slideWidth = 200; 
 
    
 
$(document).ready(function(){ 
 
    slideWidth = $("#right-content").css("width"); 
 
    
 
    $("#close").on("click",function(e){ 
 
     $("#right-content").animate({right:-slideWidth},350); 
 
     $("#center-content").removeClass("width-slide"); 
 
     $(this).hide() 
 
    }) 
 

 
})

.slide { 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0; 
 
    background:#d2d2d2; 
 
} 
 

 

 

 
#close { 
 
    position:absolute; 
 
    right:10px; 
 
    top:10px; 
 
    z-index:10; 
 
    display:none; 
 
} 
 

 
body { 
 
    overflow:hidden; 
 
} 
 

 
#main-content { 
 
    position:absolute; 
 
    width:100%; 
 
} 
 

 
#right-content { 
 
    position:absolute; 
 
    right:-400px; 
 
    top:0; 
 
    #overflow:hidden; 
 
    width:400px; 
 
    height:100%; 
 
} 
 

 

 

 
#center-content { 
 
    border:1px solid black; 
 
    margin:auto; 
 
    text-align:center; 
 
    z-index:1000; 
 
    width:100%; 
 
    float:left; 
 
    transition:width .35s ease; /* here set the transition */ 
 
} 
 

 
/*class to set width -200px*/ 
 
.width-slide { 
 
    width: calc(100% - 400px) !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-content"> 
 
    <div id="center-content"> 
 
    <button onClick="toggleDiv(1)">Try it 1</button> 
 
    <button onClick="toggleDiv(2)">Try it 2</button> 
 
    <button onClick="toggleDiv(3)">Try it 3</button> 
 
    </div> 
 
    <div id="right-content"> 
 
    <div id="close">X</div> 
 
    <div class="slide" id="div1">content 1</div> 
 
    <div class="slide" id="div2">hey I'm content 2</div> 
 
    <div class="slide" id="div3">Now it's content 3</div> 
 
    <div> 
 
</div>

變化做了新的滑動寬度： 在CSS：

#right-content-->width : newWidth和right : -newWidth

.width-slide-->width: calc(100% - newWidth) !important;

在JS：計算#right-content動態地。 多數民衆贊成在所有