前端第12天

最新推荐文章于 2024-10-16 11:23:07 发布

来地球玩啊

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量148

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/l_11789/article/details/129103924

版权

本文详细讲解了前端开发中的PC端和移动端页面特效，包括元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列以及动画函数的封装。同时介绍了移动端的触屏事件、常见特效、开发插件如Swiper的使用，以及本地存储的特性、sessionStorage和localStorage的区分，并提供了多个实战案例。

摘要由CSDN通过智能技术生成

PC端页面特效

一.元素偏移量offset系列

1.offset概述

偏移量，使用offset相关属性可以动态得到该元素的文字(偏移)、大小等。能获取元素距离带有定位的最近父元素的位置，获得元素自身大小，返回数值不带单位

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果父级都没有定位则返回以body
element.offsetTop	返回元素相对带有定位父元素上方的偏移如果父级都没有定位则返回以body的距离
element.offsetLeft	返回元素限度带有定位父元素左边框的偏移如果父级都没有定位则返回以body的距离
element.offsetWidth	返回自身包括padding 边框内容区的宽度
element.offsetHeight	返回自身包括padding 边框内容区的高度

.offsetParent 和 .parentNode: 前者返回带有定位的父亲，没有定位返回body。后者返回父亲最近一级的不管有没有定位。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>offset概述</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        
        .father {
     
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
        
        .son {
     
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        
        .w {
     
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 0 auto 200px;
            /* padding会撑大盒子 */
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
    <div class="w"></div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        var w = document.querySelector('.w');
        //不用看css得到一些盒子参数
        console.log(father.offsetTop);
        console.log(father.offsetLeft); //左侧外边距
        //以带有定位的父亲为准 父亲没有定位就会议body为准。
        console.log(son.offsetLeft);

        //打印盒子大小 宽度和高度包含padding + border + width
        console.log(w.offsetWidth); //动态获取大小
        console.log(w.offsetHeight);

        //返回带有定位的父亲
        console.log(son.offsetParent);
    </script>
</body>

</html>

2.offset和style区别

offset：获取元素的大小位置用这个

可以得到任意样式表中的样式值

得到数值没有单位的

包含padding+border+width

offset等属性是只读属性，只能得到值不能获取值

style：给元素更改值用style改变

只能得到行内样式的样式值

获得带单位的字符串

获得的值不包含padding和border的值

style.width是可读可写属性可以获取可以赋值

案例-获取鼠标在盒子内的坐标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-获取鼠标在盒子内的坐标</title>
    <style>
        .box {
     
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
     
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetHeight;
            this.innerHTML = 'x坐标是' + x + '，y坐标是' + y + '';
        })
    </script>
</body>

</html>

案例-拖动模态框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-拖动模态框</title>
    <style>
        .login-header>a {
     
            position: fixed;
            top: 20px;
            left: 40%;
            font-size: 30px;
        }
        
        .login {
     
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: 1px solid #EBEBEB;
            left: 50%;
            top: 50%;
            background-color: #fff;
            box-shadow: 0 0 20px #ddd;
            z-index: 999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
     
            width: 100%;
            margin: 10px 0 0 0;
            text-align: center;
            line-height: 40px;
            height: 40px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
     
            margin-top: 20px;
        }
        
        .login-button {
     
            width: 50%;
            margin: 30px auto 0 auto;
            line-height: 40px;
            font-size: 14px;
            border: 1px solid #EBEBEB;
            text-align: center;
        }
        
        .login-bg {
     
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
        }
        
        a {
     
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
     
            display: block;
        }
        
        .login-input input.list input {
     
            float: left;
            line-height: 35px;
            width: 350px;
            border: 1px solid #EBEBEB;
            text-indent: 5px;
        }
        
        .login-input {
     
            overflow: hidden;
            margin: 0 0 20px 40px;
        }
        
        .login-input label {
     
            float: left;
            width: 90px;
            padding-right: 10px;
            line-height: 35px;
            height: 35px;
            font-size: 14px
        }
        
        .login-title span {
     
            position: absolute;
            font-size: 12px;
            right: -10px;
            top: -30px;
            background-color: #fff;
            border: 1px solid #ebebeb;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header">
        <a href="javascript:;" id="link">
            点击,弹出登录框
        </a>
    </div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span>
                <a href="javascript:void(0);" id="closeBtn">
                    关闭
                </a>
            </span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名:</label>
                <input type="text" name="info[name]" id="username" placeholder="请输入用户名" />
            </div>
            <div class="login-input">
                <label>登录密码</label>
                <input type="password" name="info[password]" id="password" placeholder="请输入登录密码" />
            </div>
        </div>
        <div id="loginBtn" class="login-button">
            <a href="javascript:void(0)" id="login-button-submit">登录会员</a>
        </div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>

    <script>
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');

        link.addEventListener('click', function() {
     
            mask.style.display = 'block';
            login.style.display = 'block';
        })

        closeBtn.addEventListener('click', function() {
     
            mask.style.display = 'none';
            login.style.display = 'none';
        })

        //拖拽效果
        title.addEventListener('mousedown', function(e) {
     
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;

            //移动事件只能写在这里 拖动的时候变化的位置值给盒子
            document.addEventListener('mousemove', move)

            function move(e) {
     
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }

            //取消移动时间
            document.addEventListener('mouseup', function() {
     
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>

二.元素可视区client系列

1.client概述

客户端，使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性何以动态得到该元素的边框大小、元素大小

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区域的宽度，不含边框。返回数值不带单位。
element.clientHeight	返回自身包括padding、内容区域的高度，不含边框。返回数值不带单位。

2.立即执行函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立即执行函数</title>
</head>

<body>
    <script>
        //立即执行函数写法
        //方式一 (function (){})();
        (function(a) {
     
            console.log('参数：' + a);
            console.log(11);
        })(1);
        //方式二 (function (){}());
        (function(a, b) {
     
            console.log(a + b);
        }(1, 2));<