进入页面，页面滑动进入效果（自适应）

最新推荐文章于 2024-02-20 16:19:55 发布

Zayn17

最新推荐文章于 2024-02-20 16:19:55 发布

阅读量1.2k

点赞数

分类专栏： jQuery 前端文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43867927/article/details/103114815

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

基于jQuery和bootstrap的动画效果

第一步修改页面布局，使页面内容移出可视领域

        #profile{
            position: fixed;
            background-color: white;
            margin-top: 50px;
            height: 500px;
            /*使内容移除可视区域*/
            left: -1500px;
            background-color: pink;
        }

第二步构建动画函数，使页面内容从右边滑入可视区域，并居中显示

        function showUp() {
//            获取可视区域大小
            var window_length =document.body.clientWidth;
//            获取内容主体
            var profile = document.getElementById("profile");
//            获取内容主体宽度
            var profile_length = profile.offsetWidth;
//            计算活动偏移量，使其刚好居于中央
            var left = window_length/2 - profile_length/2;
//            使用jQuery的动画函数，使内容滑动
            $("#profile").animate({left: left},1500,"swing");
        }

第三步将动画函数设为onLoad事件

  	window.onload = showUp;

第四步在屏幕宽度发生变化时，使页面内容始终居中

虽然使用了bootstrap可以做到自适应的效果，但为了实现动画，我们将页面内容的位置固定，在屏幕宽度发生变化时，内容的位置也不会发生改变。因此，我们需要内容位置随着屏幕宽度一起变化。

//        resize 窗口大小变化事件
        $(window).resize(function () {
            // 内容和显示相同
            var window_length =document.body.clientWidth;
            var profile = document.getElementById("profile");
            var profile_length = profile.offsetWidth;
            var left = window_length/2 - profile_length/2;
            $("#profile").animate({left: left},500,"swing");
        });

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style>

        #profile{
            position: fixed;
            background-color: white;
            margin-top: 50px;
            height: 500px;
            /*使内容移除可视区域*/
            left: -1500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container" id="profile">
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
    </div>
    <script>
        function showUp() {
//            获取可视区域大小
            var window_length =document.body.clientWidth;
//            获取内容主体
            var profile = document.getElementById("profile");
//            获取内容主体宽度
            var profile_length = profile.offsetWidth;
//            计算活动偏移量，使其刚好居于中央
            var left = window_length/2 - profile_length/2;
//            使用jQuery的动画函数，使内容滑动
            $("#profile").animate({left: left},1500,"swing");
        }
        window.onload = showUp;
//        resize 窗口大小变化事件
        $(window).resize(function () {
            // 内容和显示相同
            var window_length =document.body.clientWidth;
            var profile = document.getElementById("profile");
            var profile_length = profile.offsetWidth;
            var left = window_length/2 - profile_length/2;
            $("#profile").animate({left: left},500,"swing");
        });
    </script>
</body>
</html>

Zayn17

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
进入页面，页面滑动进入效果（自适应）

基于jQuery和bootstrap的动画效果第一步修改页面布局，使页面内容移出可视领域 #profile{ position: fixed; background-color: white; margin-top: 50px; height: 500px; ...
复制链接

扫一扫