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

最新推荐文章于 2024-05-06 00:16:40 发布

SmallCode033

最新推荐文章于 2024-05-06 00:16:40 发布

阅读量2.5w

点赞数 4

分类专栏：前端页面效果文章标签：页面从右侧滑入效果

本文链接：https://blog.csdn.net/BestGoder/article/details/49784565

版权

前端页面效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE 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>

SmallCode033

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
实现页面从右往左侧滑入效果

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%;
复制链接

扫一扫