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：

<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）计算的，并且通过使用css过渡设置它的annimation，并为该div添加/删除自定义类：

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

Bellow你可以找到一个完整的例子：

＆＃13;

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()
   })

})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更改为使用新的幻灯片宽度：在css：

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

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

在js中：动态地计算#right-content。多数民众赞成

弹出幻灯片时内容移动

1 个答案: