-1

我在我的网站上实现了一个滑出 div，它位于页面的左侧。可以点击一个小手柄，来回拉动标签。

现场示例在这里

目前CSS如下，设置为500px宽度。我想要 250px 宽度。

.panel {
  width:500px;
  min-height:175px;
  padding:40px;
  position:fixed;
  left:-580px;
  top:29.5%;
  z-index:1;
  background:#4d5290;
  -webkit-border-radius: 0px 0px 25px 0px;
border-radius: 0px 0px 25px 0px;
}

  .panel .trigger {
    width:36px;
    text-align:center;
    color:#fff;
    position:absolute;
    top:0;
    right:-36px;
  }

我将宽度减半250px，然后假设我可以将left:-580px值减半以获得我想要的结果。

但是滑出标签向外滑动很好，但是当您再次单击手柄以隐藏标签时，它会从页面飞回原始 580 像素（这意味着您无法查看或取回它。）

我试图让它在 JS Fiddle 中工作，但我正在苦苦挣扎，因为 JS 文件在 js fiddle 中无法正常运行......正在处理它。同时，所需的一切都可以在以下位置看到：

页面/直播站点 JS链接文件

希望有人可以帮助我弄清楚它在做什么。或者数字之间的差异的公式是什么？

4

1 回答 1

2 
.panel {
    width: 250px;
    min-height: 175px;
    padding: 40px;
    position: fixed;
    left: -330px; //you have 40px of padding, we need to add that to this calculation.
    top: 29.5%;
    z-index: 1;
    background: #4D5290;
    border-radius: 0px 0px 0px 25px;
}

jQuery 的变化...

$(settings.objSlidePanel).animate({
    'left' : '-330px'
});

您的代码正在运行——点击这里

编辑

您也很可能有标记问题，当我从您的网站复制它时，您的 img 标签呈现为<img src="blahblahblah.ext" <=" div=""/>. 这可能会导致您在其他地方出现问题，可能与此代码无关。

还要检查您是否没有硬编码style="left:-580px"到<div>它的自我中。

于 2012-10-20T00:07:08.533 回答