实现页面从右往左侧滑入效果

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <script src="js/jquery-2.1.4.js">script>
    <style>
        html,body{
            width:100%;
            height:100%;
            overflow-x: hidden;//水平方向不可滑动
        }
        *{
            margin:0px;
            padding:0px;
        }
    style>
head>
<body>
    <div id="redDiv" style="background-color:red;width:100%;height:100%;position:absolute;">
        <button id="moveRightButton" type="button">
            点击向右侧移动
        button>
    div>
    <div id="yellowDiv" style="background-color:yellow;width:100%;height:100%;position:absolute;top:100%;">

    div>
    <div id="greenDiv" style="display: none;background-color:green;width:100%;height:100%;position:absolute;left:100%;top:0px;">
        <button id="moveLeftButton" type="button">
            点击向左侧移动
        button>
    div>
body>
<script>
    window.onload = function(){
        $("#moveRightButton").click(function(){
            $("#greenDiv").css("display","block");
            $("#greenDiv").animate({left:'0px'},'slow');
            $("#redDiv").animate({left:'-100%'},"slow",function(){
                $(this).css("display","none");
            });
        });
        $("#moveLeftButton").click(function(){
            $("#redDiv").css("display","block");
            $("#redDiv").animate({left:'0px'},"slow");
            $("#greenDiv").animate({left:'100%'},'slow',function(){
                $(this).css("display","none");
            });
        });
    }
script>
html>

你可能感兴趣的:(前端页面效果)