Web APIs---11. PC端网页特效(1)

1 元素偏移量offset系列

1.1 offset概述

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        position: relative;
         200px;
        height: 200px;
        background-color: pink;
        margin: 150px;
    }
    
    .son {
         100px;
        height: 100px;
        background-color: purple;
        margin-left: 45px;
    }
    
    .w {
        height: 200px;
        /*  200px; */
        background-color: skyblue;
        margin: 0 auto 200px;
        padding: 10px;
        border: 15px solid red;
    }
</style>

<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');

        console.log(father.offsetTop); //150
        console.log(father.offsetLeft); //150
        console.log(son.offsetLeft); //45

        console.log(w.offsetWidth); //1263 跟随屏幕大小动态获取  
        console.log(w.offsetHeight); //250  (200+10+10+15+15)  width+padding+border

        //返回父亲
        console.log(son.offsetParent); //// 返回带有定位的父亲 否则返回的是body
        //     <div class="father">
        //          <div class="son"></div>
        //     </div>

        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
        //     <div class="father">
        //          <div class="son"></div>
        //     </div>
    </script>
</body>

1.2 offset与style的区别

<style>
    .box {
         200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        console.log(box.offsetWidth); //200      offset可以得到任意样式表中的样式值，得到的是数字型的，没有单位
        console.log(box.style.width); //空       style只能得到行内样式表中的样式值，得到的是字符串型的，有单位
    </script>
</body>
案例：获取鼠标在盒子内的坐标
<style>
    .box {
         300px;
        height: 300px;
        background-color: pink;
        margin: 200px;
    }
</style>

<body>
    <div class="box"></div>
    <script>
        // 我们在盒子内移动， 想要得到鼠标距离盒子左右的距离。
        // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
        // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
        // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标

        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
        })
    </script>
</body>
案例：模态框拖拽

<style>
    .login-header {
         100%;
        text-align: center;
        height: 30px;
        font-size: 24px;
        line-height: 30px;
    }
    
    ul,
    li,
    ol,
    dl,
    dt,
    dd,
    div,
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a {
        padding: 0px;
        margin: 0px;
    }
    
    .login {
        display: none;
        /*先将登录框隐藏*/
         512px;
        height: 280px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background: #ffffff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9999;
        transform: translate(-50%, -50%);
    }
    
    .login-title {
         100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        position: relative;
        cursor: move;
    }
    
    .login-input-content {
        margin-top: 20px;
    }
    
    .login-button {
         50%;
        margin: 30px auto 0px auto;
        line-height: 40px;
        font-size: 14px;
        border: #ebebeb 1px solid;
        text-align: center;
    }
    
    .login-bg {
        display: none;
        /*先将灰色背景隐藏*/
         100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(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;
        height: 35px;
         350px;
        border: #ebebeb 1px solid;
        text-indent: 5px;
    }
    
    .login-input {
        overflow: hidden;
        margin: 0px 0px 20px 0px;
    }
    
    .login-input label {
        float: left;
         90px;
        padding-right: 10px;
        text-align: right;
        line-height: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .login-title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        background: #ffffff;
        border: #ebebeb solid 1px;
         40px;
        height: 40px;
        border-radius: 20px;
    }
</style>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>

    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </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>
        //1. 获取元素
        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');

        //2. 点击link[点击，弹出登录框],让mask和login显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            //3. 点击closeBtn隐藏mask和login
        closeBtn.addEventListener('click', function() {
            mask.style.display = 'none';
            login.style.display = 'none';
        })

        //4. 开始拖拽
        //（1）当我们鼠标按下，就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            //(2)鼠标移动的时候，将鼠标在页面中的坐标(变化)减去鼠标在盒子内的坐标(不变)就是模态框当前的的left和top值
            document.addEventListener('mousemove', move)//mousemove是鼠标经过，但是鼠标未被按下，和移动端的touchmove不一样

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

            //(3)鼠标弹起，让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>

</body>
案例：京东放大镜效果

在原先的品优购详情页的基础上进行修改。

  • 思路

  • 相关结构

<!-- 目标盒子 preview_img-->
<div class="preview_img">
    <img src="upload/s3.png" alt="">
    <!-- 新添加的两个盒子mask和big -->
    <div class="mask"></div>
    <div class="big">
        <img src="upload/big.jpg" alt="" class="bigImg">
    </div>
</div>
  • 相关样式
/* 目标盒子 */
.preview_img {
    position: relative;
    height: 398px;
    border: 1px solid #ccc;
}


/* 添加样式 */
.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
     300px;
    height: 300px;
    background: #FEDE4F;
    /* 半透明 */
    opacity: .5;
    border: 1px solid #ccc;
    cursor: move;
}

.big {
    display: none;
    position: absolute;
    left: 410px;
    top: 0;
     500px;
    height: 500px;
    background-color: pink;
    /* 将层级提到最高 */
    z-index: 999;
    border: 1px solid #ccc;
    overflow: hidden;
}

.big img {
    position: absolute;
    top: 0;
    left: 0;
}
  • 外部JS
window.addEventListener('load', function() { //页面加载完毕之后再执行以下代码
    var preview_img = this.document.querySelector('.preview_img');
    var mask = this.document.querySelector('.mask');
    var big = this.document.querySelector('.big');

    //1. 当我们鼠标经过preview_img就显示和隐藏mask遮挡层和big大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    //2. 将鼠标在preview_img中的坐标给mask，让mask盒子跟随鼠标移动
    preview_img.addEventListener('mousemove', function(e) {
        //1. 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;

        //(2)鼠标在盒子mask左上角
        // mask.style.left = x + 'px';
        // mask.style.top = y + 'px';

        //(2)让鼠标在盒子mask正中间 mask.style.left = x - mask.offsetWidth / 2 + 'px'= maskX + 'px'
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        //(3)为了让让mask这个透明的盒子仅仅在preview_img这个盒子内活动，加了以下判断
        //遮挡层相对于preview_img盒子最小移动距离为0
        //遮挡层相对于preview_img盒子最大移动距离为maskMax
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX > maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY > maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        //3. 大图(800px)跟随mask(300px)移动
        // 遮挡层移动距离/遮挡层最大移动距离 = 大图片移动距离/ 大图片最大移动距离
        //  maskX / maskMax = ?/bigMax

        //获取大图
        var bigIMg = document.querySelector('.bigImg');
        //大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth; //bigIMg是图片800px;big是装大图片的盒子500px
        //大图片移动距离
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        //让大图移动
        bigIMg.style.left = -bigX + 'px'; //大图要和遮挡层沿着反方向走
        bigIMg.style.top = -bigY + 'px';
    })
})
  • 将外部JS文件引入html文件
    <!-- 引入我们的js 文件 -->
    <script src="js/detail.js"></script>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/deer-cen/p/12283848.html