0

我有一个便笺，它直接添加到 html 页面的正文中。还有一个 CSS 部分可以让粘滞便笺在悬停在它们上方时变得更大一些。

此外，便笺应该通过 CSS 旋转。另外，我有一些javascript代码应该在窗口卸载之前保存便笺的位置，然后检索便笺并将其放在卸载窗口之前的相同位置。但是，旋转的便签出现了问题，因此当便签被检索并放回正文时，它们的位置与刷新页面之前的位置略有偏离。（不旋转便签时不会发生这种情况）

为了解决这个问题，我将每个便笺包含在其自己的stickyContainer div 中，该div 不会旋转，以便在卸载事件后可以检索到stickycontainer 的正确位置。

html:

<div class="stickyContainer" style="left:20px;top:70px">
    <div class="stickyNote">
        <h1>Drag Me</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>
    </div><!--stickynote-->
</div> <!--stickycontainer-->​

CSS：

.stickyNote { 
    margin: auto;
    width:auto;
    height:auto;
    background: yellow; /* Fallback */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBEB00), to(#C5C500));
    background: -moz-linear-gradient(100% 100% 90deg, #C5C500, #EBEB00);
    padding: 20px 20px 20px 20px;
    /*position:absolute;*/
    "zIndex": 3000;
    rotating the post it by 6 degrees to the left
    -webkit-transform:rotate(-6deg);  
    -o-transform:rotate(-6deg);  
    -moz-transform:rotate(-6deg);
    -webkit-box-shadow: 0px 10px 30px #000;
    -moz-box-shadow: 0px 10px 30px #000;
}

.stickyContainer {
    background-color: green;
    background: green;
    padding: 10px;
}

.delete {
    cursor:pointer;
    font-size:120%;
}

.stickyNote p {
    font-family: "Reenie Beanie", Helvetica, sans-serif;
    font-size: 30px;
    line-height: 35px;
    margin: 10px 0 10px 0;
    width: 280px;
}

/* creating the effect when the cursor is over that item.*/
.stickyNote:hover,.stickyNote:focus{  
    -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);  
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);  
    box-shadow:10px 10px 7px rgba(0,0,0,.7);  
    -webkit-transform: scale(1.25);  
    -moz-transform: scale(1.25);  
    -o-transform: scale(1.25);  
    position:absolute;  
    z-index:5;  
}

.toolbar {
    text-align:right;
    font-weight:bold;
}​

然而，现在便笺的行为很奇怪：

jsfiddle：正如您在第一个 jsfiddle 中看到的那样，（黄色）便笺在未悬停时水平扩展以适应其（绿色）容器的大小，而当悬停时，便笺不再包含在其容器中。

jsfiddle2：在第二个jsfiddle中，在便笺周围没有stickyContainer div的地方，悬停功能正确执行，由于某种原因，旋转在js fiddle中不起作用（但在我的项目中起作用），并且当有旋转时，如上所述，在卸载之前检索便笺的位置会产生略微偏离的结果。

问题：刷新后我必须更改什么以检索粘滞容器的正确位置，并且让粘滞容器仅扩展至包含粘滞便笺 div 所需的量。以及如何在粘滞容器中使粘滞便笺的旋转工作？

4

0 回答 0