1

我有一个用 php 和 jquery 开发的网站。我想在 div 中动态附加第二个背景并在第一个背景的同时向下滑动。如果用户单击菜单中的某个部分，我将新背景附加在第一个背景的顶部，然后在两个背景向下滑动直到第二个背景进入旧背景的旧位置。动画结束后，我删除了旧背景。我怎样才能做出类似的事情？我不知道如何动态附加新的 div 并同时向下滑动两个背景。如何？

这是一个简单的代码，在我开发了其余代码之后。

JSFIDDLE

html

<div></div>

css

html, body, div { height: 100%;}
div {
    opacity: .3; /*just to see there is no overlap*/
    position: relative;
    z-index: 2;
    background: url(http://www.dummyimage.com/643x12/001aff/ffffff.png&text=643+x+12) top left no-repeat;
}
4

2 回答 2

2

试试这个 -演示

HTML

<button> click </button>
<div></div>

CSS

div {
    position: absolute;
    border: solid;
    top:100px;
    left:0;
    z-index: 2;
    height: 120px;
    width: 400px;
    overflow: hidden;
    background-image:    
        url(http://www.dummyimage.com/400x120/00ff00/ffffff.png),
        url(http://www.dummyimage.com/400x120/00ff00/ffffff.png);
    background-position: 0 -120px, 0 0;
    background-repeat:   no-repeat;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
}

.hover {
    background-position: 0 0, 0 120px;
}

jQuery

var bgImg  = $("div").css("background-image"),
    bgImg2 = 'url(http://www.dummyimage.com/400x120/001aff/ffffff.png)';   

$("button").on("click", function() {
    $("div")
        .css({ "backgroundImage" : bgImg2 + ", " + bgImg })
        .addClass("hover");
});
于 2012-10-25T15:01:59.563 回答
1

显然，我并没有真正理解你的所有愿望，但我可以给你一些建议。使用更大的图像，其中一条为（无论如何）红色，另一条为（无论如何）蓝色。使用background-positionCSS 属性更改位置。您可以使用.animate()jquery的功能滑动位置。

这只是一个建议，我真的希望你向我们展示你在 javascript 方面的进展，或者你想要复制的一些参考或任何东西。

CSS

div {
  background-position-y:-100px;
}

JS

$('div').animate({'background-position-y':'0'}, 1000);

此图像应该有 2 条高度为 100px 的条带，每条带不同的颜色，您必须从任何操作按钮调用 javascript。

于 2012-10-25T14:57:49.007 回答