offsetWidth,offsetHight包括边框，clientWidth,clientHight不包括边框（但包括padding）/page-- 模态框拖拽案例----京东淘宝放大镜的案例

最新推荐文章于 2022-08-15 15:52:42 发布

原创最新推荐文章于 2022-08-15 15:52:42 发布 · 609 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #es6 #html5

本文深入探讨了前端开发中三个经典交互案例：鼠标位置显示、模态框拖拽及京东淘宝放大镜效果实现，通过HTML、CSS和JavaScript代码详细解析其工作原理。

1.获取鼠标在盒子内的标签-
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background: skyblue;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="box"></div>
<span></span>
<script>
    var boxs = document.querySelector('div')
    var spans =document.querySelector('span')
    boxs.addEventListener('mousemove',function (e) {
        // console.log(e);
        var x = e.pageX - boxs.offsetLeft
        var y = e.pageY - boxs.offsetTop
        spans.innerHTML = '距离box的x的坐标是：'+x+'---'+'距离box的y的坐标是'+y

    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

2.模态框拖拽案例
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dianji{
            text-align: center;
            cursor: pointer;
            color: saddlebrown;
        }
        .box{
            width: 350px;
            height: 400px;
            margin: 100px auto;
            background: darksalmon;
            opacity: 0.88;
            position: fixed;
            left: 0;
            top:0;
            z-index: 1000;
            display: none;
        }
        .login{
            width: 100%;
            height: 40px;
            /*padding: 10px 0 10px 0;*/
            text-align: center;
            font-size: 20px;
            cursor: move;
        }
        .close{
            float: right;
            color: firebrick;
            cursor: pointer;
        }
        .user1{
            text-align: center;
            line-height: 60px;
            margin-top: 60px;
        }
        input{
            margin-left: 10px;
        }
        .login2{
            position: relative;
            left: 50%;
            top: 25%;
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #bbbbbb;
            opacity: 0.3;
            display: none;
        }
        .login{

        }
    </style>
</head>
<body>
<div class="dianji">点击，弹出登录框</div>
<div class="box">
    <div class="login">
        登录会员
        <span class="close">关闭</span>
    </div>
    <div class="user1">
        <div class="user2">用户名:<input type="text" placeholder="请输入用户名"></div>
       <div class="user3"> 密码:&nbsp; &nbsp;<input type="password" placeholder="请输入登录密码"></div>
    </div>
    <div class="login2">登录</div>
</div>
<div class="mask"></div>
<script>
    var dianjis = document.querySelector('.dianji')
    var boxs  =document.querySelector('.box')
    var close = document.querySelector('.close')
    var logins = document.querySelector('.login')
    var masks = document.querySelector('.mask')
    dianjis.addEventListener('click',function () {
         boxs.style.display  = 'block'
        masks.style.display = 'block'
    })
    close.addEventListener('click',function () {
        boxs.style.display  = 'none'
        masks.style.display = 'none'
    })
    logins.addEventListener('mousedown',function (e) {
        var x = e.pageX - boxs.offsetLeft
        var y = e.pageY - boxs.offsetTop
        console.log(x, y);
        document.addEventListener('mousemove',move1)
        function move1(e) {
            var maxX = e.pageX - x
            var maxY = e.pageY - y
            boxs.style.left = maxX - 125 / 2 + 'px'
            boxs.style.top = maxY  - (boxs.offsetHeight + 100) / 2 + 'px'
        }
        document.addEventListener('mouseup',function (e) {
           document.removeEventListener('mousemove',move1)
        })

    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

2.京东淘宝放大镜：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .box{
             display: inline-block;
        }
        .clulture{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 80px;
            height: 80px;
            background: darksalmon;
            opacity: 0.2;
            display: none;
        }
        .big{
            position: absolute;
            left: 320px;
            top:0;
            width: 600px ;
            height: 600px;
            overflow: hidden;
            display: none;
        }
        .clulture2{
            width: 900px;
            height: 900px;
            position: absolute;
            left:0 ;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box" >
    <img class="clulture" src="../img/meinv.jpg" alt="">
    <div class="mask"></div>
</div>
<div class="big">
    <img class="clulture2" src="../img/meinv.jpg" alt="">
</div>
<script>
    var boxs = document.querySelector('.box')
    var clultures = document.querySelector('.clulture')
    var clultures2 = document.querySelector('.clulture2')
    var masks  = document.querySelector('.mask')
    var bigs = document.querySelector('.big')
   window.addEventListener('load',function () {
       boxs.addEventListener('mouseover',function () {
           masks.style.display = 'block'
           bigs.style.display = 'block'
       })
       boxs.addEventListener('mouseout',function () {
           masks.style.display = 'none'
           bigs.style.display = 'none'
       })
       boxs.addEventListener('mousemove',function (e) {
           var x = e.pageX - boxs.offsetLeft
           var y = e.pageY - boxs.offsetTop
           // console.log(x, y);
           var maskX = x - masks.offsetWidth / 2
           var maskY = y - masks.offsetHeight / 2

           if (maskX <=0){
               maskX = 0
           } else if(maskX >= (clultures.offsetWidth - masks.offsetWidth)){
               maskX = clultures.offsetWidth - masks.offsetWidth
           }
           if (maskY <= 0){
               maskY = 0
           } else if(maskY >= (clultures.offsetHeight - masks.offsetHeight)){
               maskY = clultures.offsetHeight - masks.offsetHeight
           }
           // console.log(clultures.offsetWidth - masks.offsetWidth);
           masks.style.left =maskX + 'px'
           masks.style.top = maskY + 'px'

           // 大图片的距离= 小图片的距离 * 大图片的最大距离 / 小图片的最大距离
           var clultures2X = maskX * (clultures2.offsetWidth - bigs.offsetWidth) / (clultures.offsetWidth - masks.offsetWidth)
           var clultures2Y = maskY * (clultures2.offsetHeight - bigs.offsetHeight) / ( clultures.offsetHeight - masks.offsetHeight)

           clultures2.style.left = -clultures2X + 'px'
           clultures2.style.top = -clultures2Y + 'px'
       })
   })
</script>
</body>
</html>

运行结果：
在这里插入图片描述