如何在屏幕外滑动bootstrap div？

时间：2017-09-15 20:04:45

标签： jquery twitter-bootstrap-3

使最左边的项目（项目1）不可见，向右滑动元素向左，并在最右边显示另一个元素（项目5），具有相同的幻灯片效果。

Div应该在大屏幕上左右滑动，在小屏幕上上下滑动。

此问题的解决方案包括不是引导行列的div。

如果使用bootstrap的行列来设计响应，如何进行测试？

编辑1：我想像this那样做，但是当div是自举列时。

编辑1.1：使用bootstrap时是否可以实现所需的功能？

＆＃13;
＆＃13; 
$(document).ready(function() {
  var array = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6", "item 7"];
  // array containing all items
  
  $("#left_btn").on('click', function(e) {
    // slide items to the left i.e. make leftmost item(item 1) invisible by sliding elements right to it towards left and show another element(item 5) at rightmost with same slide effect
  });

  $("#right_btn").on('click', function(e) {
    // just reverse of left button
  });
})
＆＃13; 
.col-sm-2 {
  padding-left: 15px;
  padding-right: 15px;
}

.btn {
  margin-top: 30px;
  margin-bottom: 30px;
}

.item {
  height: 100px;
  border: 5px solid blue;
  background-color: pink;
}
＆＃13; 
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- custom css styles file page.css -->
<link rel="stylesheet" href="delete.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- jquery-ui.js  library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>


<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        <button class="btn" id="left_btn">
					Shift left
				</button>
      </div>
      <div class="col-sm-2">
        <div id="item1" class="item">
          Item 1
        </div>
      </div>
      <div class="col-sm-2">
        <div id="item2" class="item">
          Item 2
        </div>
      </div>
      <div class="col-sm-2">
        <div id="item3" class="item">
          Item 3
        </div>
      </div>
      <div class="col-sm-2">
        <div id="item4" class="item">
          Item 4
        </div>
      </div>
      <div class="col-sm-2" id="right_btn">
        <button class="btn">
					Shift Right
				</button>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

看起来你很难开始它。不幸的是，Bootstrap div并不是真的为此做的，但是这里有一个div的例子，它能够在不使用Bootstrap的情况下在屏幕上向右移动。我相信你可以从这个例子中找出你需要做的事情。

// Config box
$('.spin-icon').click(function() {
  $('.theme-config-box').toggleClass('show');
});
/* Controls box */

.theme-config {
  position: absolute;
  top: 90px;
  right: 0;
  overflow: hidden;
}

.theme-config-box {
  margin-right: -300px;
  position: relative;
  z-index: 2000;
  transition-duration: 0.8s;
}

.theme-config-box.show {
  margin-right: 0;
}

.spin-icon {
  background: #1ab394;
  position: absolute;
  padding: 7px 10px 7px 13px;
  border-radius: 20px 0 0 20px;
  font-size: 16px;
  top: 0;
  left: 0;
  width: 40px;
  color: #fff;
  cursor: pointer;
}

.skin-settings {
  width: 300px;
  margin-left: 40px;
  background: #f3f3f4;
}

.skin-settings .title {
  background: #efefef;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  padding: 10px 15px;
  font-size: 12px;
}

.setings-item {
  padding: 10px 30px;
}

.setings-item .switch {
  float: right;
}


/* SWITCHES */

.onoffswitch {
  position: relative;
  width: 54px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #1AB394;
  border-radius: 3px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 16px;
  padding: 0;
  line-height: 16px;
  font-size: 10px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 7px;
  background-color: #1AB394;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 7px;
  background-color: #FFFFFF;
  color: #919191;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 0;
  background: #FFFFFF;
  border: 2px solid #1AB394;
  border-radius: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 36px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  right: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="theme-config">
  <div class="theme-config-box">
    <div class="spin-icon">
      <i class="fa fa-cogs fa-spin"></i>
    </div>
    <div class="skin-settings">
      <div class="title">Options<br>
        <small style="text-transform: none;font-weight: 400">Change settings here.</small>
      </div>
      <div class="setings-item">
        <span>
	    Option A
	  </span>

        <div class="switch">
          <div class="onoffswitch">
            <input type="checkbox" name="optionA" class="onoffswitch-checkbox" id="optionA">
            <label class="onoffswitch-label" for="optionA">
		<span class="onoffswitch-inner"></span>
		<span class="onoffswitch-switch"></span>
	      </label>
          </div>
        </div>
      </div>
      <div class="setings-item">
        <span>
	    Option B
	  </span>

        <div class="switch">
          <div class="onoffswitch">
            <input type="checkbox" name="optionB" class="onoffswitch-checkbox" id="optionB">
            <label class="onoffswitch-label" for="optionB">
		<span class="onoffswitch-inner"></span>
		<span class="onoffswitch-switch"></span>
	      </label>
          </div>
        </div>
      </div>
      <div class="setings-item">
        <span>
	    Option C
	  </span>

        <div class="switch">
          <div class="onoffswitch">
            <input type="checkbox" name="optionC" class="onoffswitch-checkbox" id="optionC">
            <label class="onoffswitch-label" for="optionC">
		<span class="onoffswitch-inner"></span>
		<span class="onoffswitch-switch"></span>
	      </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：1)

  

«有些问题是概念性的，在尝试之前需要先了解它们。»

我对此表示支持。我们来试试吧。

首先，你«想要滑动bootstrap div，并且没有任何关于如何做到这一点的线索。»。我假设你搜索了文档说这个...无论如何你是对的，因为你所说的“bootstrap div”并不打算这样做。它们旨在根据您必须实施的CSS Grid System“自动调整”设备宽度。

这些div不是“固定”，它们是“浮动”。这意味着如果它们无法适应行的剩余空间，基于"break points"，它们将会向下浮动。

所以你要做几个计算。
您将基于从渲染页面获得的“测量”，并且必须在resize上重新执行计算，因为移动设备具有横向和纵向方向。

仅使用.col-*类与您要创建的行为完全相反，该行为具有概念名称： Carousel 。有很多Carousel插件已经编码，可以容纳所有类型的内容（图像，视频，文本...），并保持所有“响应”。因此，如果您想使用Bootstrap进行响应，我建议您使用经过全面测试且经过充分审核的插件。

以下示例仅供您理解这一概念。如果您试图使用该代码，希望您没有错误...请不要让我在发现它时（几分钟）修复它们。

<小时/> 所以这是旋转木马的概念：

想象一张纸上切出一个长方形的孔 然后是第二张纸，与孔的高度相同，但要宽得多。

然后，您将通过滑动孔中的“窗口”中的小窗口来使用这两个。

一张价值千言万语的图片，他们说......那么视频呢？ Slide Out Birthday Card

现在，这应该是明确的。

所以你必须有一个“洞”的div和滑动纸的div 现在让我们看看代码和评论。

$(document).ready(function() {

  // Get our element count.
  var carouselItemCount = $(".carousel-item").length;
  // An index to always know the sliding container position.
  var moveIndex = 0;
  // Always have 3 elements in view.
  var maxMove = carouselItemCount-2;

  // Function to set all elements widths.
  function setWidths(){
    // Get the window witdh
    var WWidth = $(window).width();
    console.log("WWidth: "+WWidth);

    // Are we in a Small device?
    var SM = false;
    if(WWidth<768){
      SM = true;
    }
    // If yes, wewant to show 3 elements anyway,
    // so we can't rely on the .col-sm-2 width
    // because it is equal to 100% of the window.
    if(SM){
      var SM2width = WWidth/4;
    }else{
      var SM2width = $(".col-sm-2").first().outerWidth(true);
    }
    $(".carousel-item").width(SM2width);

    // Get the items widths with and without border/margin
    var carouselItemWidth = $(".carousel-item").width();
    var carouselItemOuterWidth = $(".carousel-item").outerWidth(true);

    // Set carousel item margin (remainder of caroussel-inner - 3* items);
    var carouselInnerVisibleSpaceLeft = $(".carousel-inner").parent("div").innerWidth() - (carouselItemWidth * 3);
    $(".carousel-item").css({"margin": "0 "+carouselInnerVisibleSpaceLeft/8+"px"});

    // Get the new items outer widths (we just changed it)
    var NewCarouselItemOuterWidth = $(".carousel-item").outerWidth(true);

    // Get the items border, as it causes an offset issue.
    var border = parseInt($(".item").css("border"));
    console.log("border: "+border);

    // Set animate postion (needed on resize)
    $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},0);


    // ========== Movements triggered by user

    // LEFT
    $("#left_btn").off('click').on('click', function(e) {

      console.log("Click left");
      moveIndex++;
      if(moveIndex<maxMove){
        $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},800);
      }else{
        console.log("full left reached");
        // Canccel that moveIndex addition.
        moveIndex--;
      }
    });

    // RIGHT
    $("#right_btn").off('click').on('click', function(e) {

      console.log("Click right");
      moveIndex--;
      if(moveIndex>=0){
        $(".carousel-inner").animate({"left":-moveIndex * (NewCarouselItemOuterWidth + border)},800);
      }else{
        console.log("full right reached");
        // Canccel that moveIndex substraction.
        moveIndex++;
      }
    });

  } // setWidths

  // Set all elements width on load and get the carousel item widths needed for movements.
  setWidths();
  // Set all elements width on resize.
  $(window).on("resize", setWidths);

});  // Ready

在此CodePen中，您会看到代码正在运行中 您还将看到对HTML和CSS所做的修改 （我觉得在这里发帖是不相关的）。

相关问题
最新问题