offset家族

最新推荐文章于 2023-03-08 16:43:02 发布

montaellis

最新推荐文章于 2023-03-08 16:43:02 发布

阅读量756

点赞数

分类专栏： javascript

javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<pre name="code" class="html">

1.2 offset家族offset 自己的目的： js中有一套方便的获取元素尺寸的办法就是offset家族； 1.2.1 offsetWidth offsetHeight得到对象的宽度和高度(自己的，与他人无关) offsetWidth = width + border + padding div { width:220px; border-left:2px solid red; padding:10px;} div.offsetWidth = 220 + 2 + 20 为什么不用 div.style.width 因为东西只能得到行内的数值1.2.2 offsetLeft offsetTop 返回距离上级盒子（最近的带有定位）左边的位置如果父级都没有定位则以body 为准这里的父级指的是所有上一级不仅仅指的是父亲还可以是爷爷曾爷爷曾曾爷爷。。。。 offsetLeft 从父级的padding 开始算父亲的border 不算总结一下：就是子盒子到定位的父盒子边框到边框的距离 1.2.3 offsetParent 返回改对象的父级（带有定位）不一定是亲的爸爸前面学过一个返回父亲(亲的) parentNode 有所区别如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。var son = document.getElementById("son");//alert(son.parentNode.id);alert(son.offsetParent.tagName); // tagName标签的名字 1.2.4 offsetTop style.top 的区别一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以只有定位的盒子才有 left top right 二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 style.left = 300px parseInt（300px）结果 300parseInt（style.left） + parseInt（style.left）三、offsetTop 只读，而 style.top 可读写。四、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。五、最重要的区别 style.left 只能得到行内样式 offsetLeft 随便

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖动水平条</title>
    <style>
        * {margin:0;padding:0;}
        .scroll {
            width: 400px;
            height: 8px;
            background-color: #ccc;
            margin: 100px;
            position: relative;

        }
        .bar {
            width: 10px;
            height: 22px;
            background-color: #369;
            position: absolute;
            top: -7px;
            left: 0;
            cursor: pointer;
        }
        .mask {
            width: 0;
            height: 100%;
            background-color: #369;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="scroll" id="scrollBar">
    <div class="bar"></div>
    <div class="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
    var scrollBar = document.getElementById("scrollBar");
    var bar  = scrollBar.children[0];
    var mask = scrollBar.children[1];
    var demo = document.getElementById("demo");
   /* document.onmousedown = function() {
        alert(11);
    }*/
    bar.onmousedown = function(event) {
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;
       // alert(11);
        // 拖动一定写到 down 里面才可以
        var that = this;
        document.onmousemove = function(event) {
            var event = event || window.event;
            that.style.left = event.clientX - leftVal  + 'px';
            //alert(that.style.left);
            var val = parseInt(that.style.left);
            if(val < 0)
            {
                that.style.left = 0;
            } else if(val > 390)
            {
                that.style.left = "390px";
            }
            mask.style.width = that.style.left;  // 遮罩盒子的宽度
            //计算百分比
            demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
        document.onmouseup = function() {
            document.onmousemove = null;   // 弹起鼠标不做任何操作
        }
    }

</script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        * {margin: 0;padding: 0;}
        img {
            vertical-align: top;
        }
        .box {
            width: 350px;
            height: 350px;
            margin:100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big {
            width: 450px;
            height: 450px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="fdj">
    <!--小盒子-->
    <div class="small">
        <img src="images/001.jpg" alt=""/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/0001.jpg" alt=""/>
    </div>
</div>
</body>
</html>
<script>
   var fdj = document.getElementById("fdj");  // 获得最大的盒子
    var small = fdj.children[0];  // 获得small 小图片 350盒子
    var big = fdj.children[1];  // 获得 大图片 800 盒子
    var mask = small.children[1];  // 小的黄色盒子
   var bigImage = big.children[0]; // 大盒子里面的图片
    small.onmouseover = function() {   // 鼠标经过显示出他们
        mask.style.display = "block";
        big.style.display = "block";
    }
    small.onmouseout = function() {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //  鼠标在small 内移动
   var x = 0;
   var y = 0;
    small.onmousemove = function(event) {
        var event = event || window.event;
         x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;  // 再某个盒子内的坐标
         //alert(this.offsetLeft);
         y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
         if(x < 0)
         {
             x = 0;
         }
         else if(x > small.offsetWidth - mask.offsetWidth)
         {
             x = small.offsetWidth - mask.offsetWidth;
         }
         if(y<0)
         {
            y = 0;
         }
         else if(y > small.offsetHeight - mask.offsetHeight)
         {
             y = small.offsetHeight - mask.offsetHeight;
         }
         mask.style.left = x + "px";
         mask.style.top = y + "px";
         /*计算  ：  夫子 一顿吃 2个馒头    娇子  一顿 4个馒头
         问  夫子今天吃了 3个馒头  娇子应该吃几个？  */
         /*计算出他们的倍数   4 / 2    2倍
          3 * 2  == 6个  */
         /* 大图盒子 /  小图盒子  倍数
          我们 再小图移动的距离 *  倍数  ==  大图的位置*/
         bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
         bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";

    }
</script>

montaellis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offset家族

1.2 offset家族offset 自己的目的： js中有一套方便的获取元素尺寸的办法就是offset家族； 1.2.1 offsetWidth offsetHeight得到对象的宽度和高度(自己的，与他人无关) offsetWidth = width + border + padding div { width:220px; border-left
复制链接

扫一扫