div向左、向右移动的动画效果

最新推荐文章于 2024-07-11 10:27:02 发布

镇杰。

最新推荐文章于 2024-07-11 10:27:02 发布

阅读量8.2k

点赞数 3

分类专栏：前端文章标签： div向左移动 div向右移动 jq向左移动效果 jq向右移动效果

本文链接：https://blog.csdn.net/weixin_43452467/article/details/105334390

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.先把需要移动div定位到动画开始前的位置

<head>
    <style>
        .box1{
            position:relative;
            width: 50%;
            height: 10%;
            background-color: yellow;
        }
        .box2{
            position:relative;
            width: 50%;
            height: 10%;
            background-color: red;
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 800px;background-color: white">
    <div style="width: 100%;">
        <div class="box1"><!-- 把需要移动的div定位到动画开始前的位置 -->
            box1
        </div>
    </div>

    <div style="width: 100%;padding-left: 50%">
        <div class="box2"><!-- 把需要移动的div定位到动画开始前的位置 -->
            box2
        </div>
    </div>
</div>

</body>

效果如图：

2.引入juery文件

<!DOCTYPE html>
<html lang="en">
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="jquery-3.4.1/jquery-3.4.1.min.js"></script>
<head>
    <style>
        .box1{
            position:relative;
            width: 50%;
            height: 10%;
            background-color: yellow;
        }
        .box2{
            position:relative;
            width: 50%;
            height: 10%;
            background-color: red;
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 800px;background-color: white">
    <div style="width: 100%;">
        <div class="box1"><!-- 把需要移动的div定位到动画开始前的位置 -->
            box1
        </div>
    </div>
    
    <div style="width: 100%;padding-left: 50%">
        <div class="box2"><!-- 把需要移动的div定位到动画开始前的位置 -->
            box2
        </div>
    </div>
</div>
</body>
</html>