记得喝水
2015-11-28 13:07
var imgWidth = imgs[0].offsetWidth;/*这是动态获取的吗??还是固定值??*/
代码中的每一张图片的offsetWidth被其他的图片覆盖的部分算吗?是怎么计算了。我知道offsetWidth 是width+padding+border,但是这里有些不懂。
window.onload = function() {
//容器对象
var box = document.getElementById('container');
//获得图片NodeList对象集合
var imgs = box.getElementsByTagName('img');
//单张图片的宽度
var imgWidth = imgs[0].offsetWidth;/*这是动态获取的吗??还是固定值*/
//设置掩藏门体露出的宽度
var exposeWidth = 160;
//设置容器总宽度
var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
box.style.width = boxWidth + 'px';
//设置每道门的初始位置
function setImgsPos() {
for (var i = 1, len = imgs.length; i < len; i++) {
imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
}
}
setImgsPos();
//计算每道门打开时应移动的距离
var translate = imgWidth - exposeWidth;
//为每道门绑定事件
for (var i = 0, len = imgs.length; i < len; i++) {
//使用立即调用的函数表答式,为了获得不同的i值
(function(i) {
imgs[i].onmouseover = function() {
//先将每道门复位
setImgsPos();
//打开门
for (var j = 1; j <= i; j++) {
imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
}
};
})(i);
}
};
是动态获取 但是如果你dom结构不变的话 她就是固定的
DOM探索之基础详解篇
98356 学习 · 259 问题
相似问题