学习JS记录-1-滑动门效果

最新推荐文章于 2023-07-06 18:38:50 发布

cicirruan

最新推荐文章于 2023-07-06 18:38:50 发布

阅读量69

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/cicirruan/article/details/103149094

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

容器加上图片，定位简单布置结构。
利用JS确定宽度和位置。
熟悉DOM操作。


```javascript
// 获取盒子元素
let box = document.getElementById("box");
// 获取图片宽度
let imgs = box.getElementsByTagName("img");
let imgWidth = imgs[0].offsetWidth;
// 设置显示宽度
let exposeWidth = 160;
// 设置盒子宽度
let boxWidth = imgWidth + (imgs.length-1)*exposeWidth;
box.style.width = boxWidth +"px";
// 实现图片堆放
function setPos() {
    for(let i = 1, len= imgs.length; i<len;i++){
         imgs[i].style.left = imgWidth + exposeWidth*(i-1) +"px";
    }
}
setPos();
// 获取移动距离
//循环 绑定事件
let transL = imgWidth - exposeWidth;
for(let i =0, len = imgs.length;i<len;i++){
    (function (i) {
       imgs[i].onmouseout = function () {
           setPos();
           for(let j =1,len=imgs.length;j<=i;j++){
               imgs[j].style.left = parseInt(imgs[j].style.left) - transL +"px";
           }
       }
    })(i)
}

新知识点-转自[译] JavaScript：立即执行函数表达式（IIFE）*