1

私はphpとjqueryで開発したサイトを持っています。私はdivで2番目の背景を動的にアタッチし、最初の背景と同時にスライドさせたいと思っています。ユーザーがメニューのセクションをクリックすると、最初の背景の上に新しい背景が追加され、2 つの背景が下にスライドした後、2 番目の背景が古い背景の古い位置に移動します。アニメーションの後、古い背景を削除します。似たようなものを作るにはどうすればいいですか？新しい div を動的にアタッチし、同時に 2 つの背景をスライドさせる方法がわかりません。どのように？

これは単純なコードで、残りのコードを開発した後です。

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

もちろん、私はあなたのすべての願いを本当に理解しているわけではありませんが、私はあなたに何かを提案することができます。1つのストリップを（何でも）赤い色で、もう1つのストリップを（何でも）青で、より大きな画像を使用します。background-positionCSSプロパティを使用して位置を変更します。.animate()jqueryの機能を使用して位置をスライドさせることができます。

これは単なる提案です。JavaScriptの進捗状況、または複製したいものなどの参照を表示してほしいと思います。

CSS

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

JS

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

この画像には、高さ100pxの2つのストリップがそれぞれ異なる色で含まれている必要があり、アクションボタンからjavascriptを呼び出す必要があります。

于 2012-10-25T14:57:49.007 に答える