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

ruirui_1996 2017-11-04 07:47:53


要做一个鼠标滑到对应的图片,显示一个大图并随鼠标移动的效果
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";
}

};
}


完成的效果就是偏差非常大,后来发现是 this.offsetLeft的问题, 第一个this.offsetLeft为10,并不是到边缘的数值,求解答,谢谢。
...全文
162 4 点赞 打赏 收藏 举报
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
文盲老顾 2017-11-06
position 中,absolute和relative会对其内部的标签重构坐标系,而offset是对于最近的上层具有重构坐标系的标签而言的,不一定是对浏览器而言的
  • 打赏
  • 举报
回复
ruirui_1996 2017-11-06
还是不行呀~
  • 打赏
  • 举报
回复
chen_2016_web 2017-11-05
你是给所有图片设置了margin-left: 10px;吧,再设置一个CSS样式,.box img:first-child{margin-left: 0;}。如果是其他的问题,我就看不懂你的描述了
  • 打赏
  • 举报
回复
天际的海浪 2017-11-05
margin-left: 10px;换成 margin-right: 10px;不就好了
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2017-11-04 07:47
社区公告
暂无公告