PC端网页特效异读

热爱编程的花甜甜

已于 2023-01-04 18:14:55 修改

阅读量47

点赞数

文章标签： html 前端

于 2023-01-03 16:37:00 首次发布

本文链接：https://blog.csdn.net/acsweetest/article/details/128531200

版权

元素偏移量offset系列

得到盒子在页面中的坐标

缺点：只能得到坐标但是无法更改坐标的位置，如果需要更改则需要使用style

有父亲有定位·无单位

offset与style的区别：

【注意】给style赋值以后需要加‘px’单位

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

【核心】鼠标在页面里的坐标-盒子在页面中的坐标=鼠标在盒子里面的坐标

  <style>
        .box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>

    <script>
        var box=document.querySelector('.box');
        box.addEventListener('mousemove',function(e){
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x=e.pageX-this.offsetLeft;
            var y=e.pageY-this.offsetTop;
            this.innerHTML='x坐标是'+x+'y坐标是'+y;
        })

【案例】模态框的拖拽

[案例]仿京东放大镜效果

如果想要外部引入js在上方,则需要加:window.addEventListener('load',function(){

})

热爱编程的花甜甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端网页特效异读

缺点：只能得到坐标但是无法更改坐标的位置，如果需要更改则需要使用style。【核心】鼠标在页面里的坐标-盒子在页面中的坐标=鼠标在盒子里面的坐标。【注意】给style赋值以后需要加‘px’单位。有父亲有定位·无单位。得到盒子在页面中的坐标。
复制链接

扫一扫