Rumah > hujung hadapan web > html tutorial > html5 页面滚动_html/css_WEB-ITnose

html5 页面滚动_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 08:50:50
asal
900 orang telah melayarinya

两个页面 page1 page2

page1 在上 page2在下 

页面向上滚动

page1.style.display = "block";
page2.style.display = "block";
page2.style.top = "100%";
page1.setAttribute("class","page fadeout");
page2.setAttribute("class","page fadein ");


#page1.fadeout{
    opacity: .3;
    -webkit-transition:.5s;
    -webkit-transform: translate(0,-100%);
}
#page2.fadein{
    -webkit-transition: .5s;
    -webkit-transform: translate(0,-100%);
}

页面向下滚回来怎么写 求教?


回复讨论(解决方案)

搞定 了 
    $("#edit_home").click(function(){
        setTimeout(function(){
            page_main.removeAttribute("page fadeout");
            page_edit.removeAttribute("page fadein");
            page_main.style.top = "-100%";
            page_edit.style.top = "0%";
            page_main.setAttribute("class","page fadeout1");
            page_edit.setAttribute("class","page fadein1");
        },1000);
        $('#edit_home').removeClass().addClass("bounce" + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass();
        });

    });

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan