2

我正在尝试将固定 div 添加到 snap.js （https://github.com/jakiestfu/Snap.js/）中的内容包装器中。我尝试过的一切都失败了，因为 snap.js 用所有固定元素推动了整个画布。这有什么技巧吗？

我在这里模拟了我想要达到的效果在此处输入图像描述

更新：在对该问题进行进一步调查后，我得出结论，这个固定的 div 需要一个事件监听器来触发相反的 transform:translate3d。该脚本通过将 transform:translate3d 设置为与左侧抽屉相同的宽度来工作。这是片段：

x: function(n) {
                if( (settings.disable=='left' && n>0) ||
                    (settings.disable=='right' && n<0)
                ){ return; }

                n = parseInt(n, 10);
                if(isNaN(n)){
                    n = 0;
                }

                if( utils.canTransform() ){
                    var theTranslate = 'translate3d(' + n + 'px, 0,0)';
                    settings.element.style[cache.vendor+'Transform'] = theTranslate;
                } else {
                    settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';

                    settings.element.style.left = n+'px';
                    settings.element.style.right = '';
                }

有谁知道如何编写一个事件监听器，将固定 div 的 transform3d 设置为与内容容器相反的数量？

4

2 回答 2

0

您是否尝试过绝对元素而不是固定元素？

如果您保留固定元素，则必须在此元素上添加动画以与菜单同时移动。

固定元素基于页面的相同来源（左上角），如果将其放在其他元素中，则相同。

绝对是基于第一个元素是相对的。

于 2013-09-09T09:28:07.533 回答
0

终于有时间帮你了。是的，您必须反转保存图像的容器的过渡。

您不得不稍微增强 Jacob 的脚本。

首先定义一个容器，在您的“快照内容”中包含一个图像 - 容器。

<div id="invertTransDiv">
    <div class="infotext">This DIV (with the red border and it's background image) translates inverted</div>
</div>

然后你必须添加一些样式：

#invertTransDiv{
    background: none repeat scroll 0 0 #5E87B0;
    background-image: url("http://jakiestfu.github.io/Snap.js/demo/assets/drag.png");
    background-repeat: no-repeat;
    border: solid red 2px;
    height: 150px;
    left: 50px;
    position: fixed;
    top: 400px;
    width: 200px;
    z-index: 3;
}

.infotext{
    width: 200px;
    margin-top: 50px;
}

然后增强 Jacob 的脚本。

在这里不做太多细节 - 去他的 Fiddle Fiddle 这里的关键点只是在初始化时添加你的倒置 Div：

var snapper = new Snap({
element: document.getElementById('content'),
invertedDiv: document.getElementById('invertTransDiv')

});

然后你必须“简单地;-)”用（-1）的负因子反转转换 - 但你会看到小提琴。看看带有评论的 JS 部分（大约有五六个）/*-------------TESTINVERT*/

于 2013-10-12T16:45:29.373 回答