js-放大镜案例基础知识

最新推荐文章于 2021-02-03 15:58:22 发布

珂鸣玉

最新推荐文章于 2021-02-03 15:58:22 发布

阅读量164

点赞数 1

本文链接：https://blog.csdn.net/weixin_44239541/article/details/88206085

版权

一、offset系列

1:无定位的情况下所有元素均已浏览器左上角为参考 offset系列
//offsetWidth = width+border*2+padding*2
//offsetHeight= height+border*2+padding*2
//offsetLeft
//offsetTop
//offsetparent 返回元素对象当前元素离他最近的父级元素（必须有定位）

2:当有定位的情况下当前元素或会找离他最近的父级元素为参考最终直到找到body
/*父盒子距离他父亲左边界以及上边界的值 */
console.log('父盒子上边界'+fa.offsetTop,'父盒子左边界'+fa.offsetLeft)
/*子盒子距离他父亲左边界以及上边界的值*/
console.log('孩子的上边界'+child.offsetTop,'子盒子左边界'+child.offsetLeft)

二、client系列

document.onmousemove = function(e){

 e为事件参数 保存当前事件的详细信息 例如事件对象、事件类型，如果是鼠标事件则e中有两个值 就是

    鼠标横纵坐标值 分别为e.clientX e.clientY

三、scroll系列

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)

四、案例：通过设置鼠标值实现对应图片的移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            position: relative;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<img src="images/图片3.jpg" alt="" style="left: 0 ; top: 0">
<script>
    window.onload = function () {
        /*
        * 图片随着鼠标的动  --》位置值
        * client  鼠标位置值 ---。事件函数里面有一个参数 （保存事件的具体信息）
         * 事件对象：document ---》 可视窗 口 类型： 移动 onmousemove
          *
          * */
        var img = document.getElementsByTagName('img')[0];
        document.onmousemove = function (e) {
            /*数字类型 整数*/
            console.log(e.clientX,e.clientY);
            img.style.left = e.clientX-150 + 'px';
            img.style.top = e.clientY - 150 + 'px';
        }
    }
</script>
</body>
</html>

如图所示，最终图片会跟随鼠标移动而移动

珂鸣玉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js-放大镜案例基础知识

一、offset系列1:无定位的情况下所有元素均已浏览器左上角为参考 offset系列 //offsetWidth = width+border*2+padding*2 //offsetHeight= height+border*2+padding*2 //offsetLeft //offsetTop //offsetparent 返回元素对象...
复制链接

扫一扫