Question

我很确定已经有一个例子，但我找不到一个，而且我也不确切知道要搜索的内容。

我正在尝试从上面用红色圈出的按钮制作一个可调整大小的div。

这个div背后的照片来自一个光滑的滑块（http://kenwheeler.github.io/slick/）。

<div class="slider-for">
                <img src="images/product0.jpg" alt="">
                <img src="images/product1.jpg" alt="">
                <img src="images/product2.jpg" alt="">
                <img src="images/product3.jpg" alt="">
            </div>

我正在考虑将宽度设置为0以上，然后使用滑块，使用js增加宽度。

在这个div中，我想为这个特定的产品添加配方。我有4张照片，所以内容必须根据图片而改变。（所以它不是静态内容）。

这需要在php中进行吗？

Answer 1

我不确定您是否已经解决了这个问题，但是由于您在另一个问题上为我提供了帮助，因此我很乐意为您提供帮助。

您有一些选择。

使用纯JavaScript。您可以为此使用一个库（例如：this）。
使用Jquery $（）。draggable（）属性。 This might help for styling the button.。
使用纯HTML和CSS resize。这不好，因为您无法将任何样式应用于<div>。
您可以通过混合使用三个<div>元素来解决，
- 其中一个带有position: fixed。这就是你的背景。
- 另一个用于容器（手动设置宽度以向用户隐藏页面）。移除滚动条，并强制html, body的宽度与屏幕匹配。
- 容器中另一个<div>用于容纳您的内容。这应该能够水平移动以显示和隐藏元素。

Answer 2

我认为这会对你有所帮助：

https://jsfiddle.net/u0Ljnttg/1/

它有点复杂，但仍然足够好。：）

为了SO： JS：

$srbytes = "\x"."80\x3e\x00\x00"; 
$array1 = unpack("v",$srbytes);

HTML：

var links = document.getElementById("imageLinks");
links.onmousedown = function(e) {
  var theSrc = e.target.dataset.src;
  if (theSrc) {
    str = "url(\"" + theSrc + "\");";
    //Sorry for using this:
    document.getElementById("imageBack").setAttribute("style", "background-image:" + str)
  }
}


var resizer = document.getElementById("content-resize");
resizer.onmousedown = resizableStart;

function resizableStart(e) {
  var elem = document.getElementById("content");
  elem.originalW = elem.clientWidth;
  this.onmousemove = resizableCheck;
  this.onmouseup = this.onmouseout = resizableEnd;
}

function resizableCheck(e) {
  var elem = document.getElementById("content");
  if (elem.clientWidth === elem.originalW) {
    elem.originalX = e.clientX;
    this.onmousemove = resizableMove;
  }
}

function resizableMove(e) {
  var elem = document.getElementById("content");
  var newW = elem.originalW - e.clientX + elem.originalX;
  if (newW < elem.originalW) {
    elem.style.width = newW + 'px';
  }
}

function resizableEnd() {
  this.onmousemove = this.onmouseout = this.onmouseup = null;
}

CSS：

<div class='container'>
  <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')">

    <div class='content' id="content">
      <div id="imageLinks">
        <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a>
        <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a>
        <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a>
        <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a>
      </div>
      <span id="content-resize"></span>
    </div>
  </div>
</div>

尝试使用可调整大小的拖动器创建div

2 个答案: