为什么第一个图片所属div的offsetLeft值为10？

2017-11-04 07:47:53 267 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

ruirui_1996 墨衍会员 · AI 创作全网分发关注 + 加入社区

Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft) 1、无缝滚动原理：（1）让div动起来，让ul一直向左/向右移动；（2）即利用定时器让物体从左到右或从右到左进行滚动。步骤：（1）复制li——innerHTML和+=，将阅读详情

要做一个鼠标滑到对应的图片，显示一个大图并随鼠标移动的效果
HTML代码：

<div id="box" class="box">

    <img src="img/1.jpg" bigImg="img/11.jpg" class="img"/>

    <img src="img/2.jpg" bigImg="img/22.jpg" class="img"/>

    <img src="img/3.jpg" bigImg="img/33.jpg" class="img"/>

    <img src="img/4.jpg" bigImg="img/44.jpg" class="img"/>

    <div id="mark">

        <img src="img/11.jpg" id="bigImg"/>

    </div>

</div>

CSS代码：



        body, div, ing {

            margin: 0;

            padding: 0;

        }



        img {

            display: block;

            border: none;

        }



        .box {

            width: 450px;

            margin: 20px auto;

            position: relative;

        }



        .box img {

            width: 100px;

            border: 1px solid #777777;

            float: left;

            margin-left: 10px;

        }



        #mark {

            position: absolute;

            top: 0px;

            left: 0;

            width: 384px;

            height: 216px;

            border: 1px solid #5bc0de;

            z-index: 10;

            display: none;

        }



        #mark img {

            border: none;

            float: none;

            margin-left: 0px;

            width: 100%;

            height: 100%;

        }

JS代码：

var box = document.getElementById("box");

    var imgs = document.getElementsByClassName("img");

    var mark = document.getElementById("mark");

    var bigImg = document.getElementById("bigImg");

    for (var i = 0; i < imgs.length; i++) {

        imgs[i].onmouseenter = function (e) {

            e = e || window.event;

            mark.style.display = "inline-block";

            bigImg.src = this.getAttribute("bigImg");

            mark.style.left = e.clientX - this.offsetLeft + 5 + "px";

            mark.style.top = e.clientY - this.offsetTop + 5 + "px";

        };

        imgs[i].onmousemove = function (e) {

            e = e || window.event;

            if (mark) {

                mark.style.left = e.clientX - this.offsetLeft + 5 + "px";

                mark.style.top = e.clientY - this.offsetTop + 5 + "px";

            }



        };

        imgs[i].onmouseleave = function (e) {

            e = e || window.event;

            if (mark) {

                mark.style.display = "none";

            }



        };

    }