超实用的JavaScript代码段 Item5 --图片滑动效果实现_java web图片滚动效果实现

最新推荐文章于 2024-11-17 22:31:08 发布

2401_84435739

最新推荐文章于 2024-11-17 22:31:08 发布

阅读量88

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/2401_84435739/article/details/138250165

版权

    </div>
</body>

```

css:

#container {
 height: 477px;
 margin: 0 auto;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 overflow: hidden;
 position: relative;
}

#container img {
 position: absolute;
 display: block;
 left: 0;
 border-left: 1px solid #ccc;
}

js操作：

window.onload = function() {
    //容器对象
    var box = document.getElementById('container');

    //获得图片NodeList对象集合
    var imgs = box.getElementsByTagName('img');

    //单张图片的宽度
    var imgWidth = imgs[0].offsetWidth;

    //设置掩藏门体露出的宽度
    var exposeWidth = 180;

    //设置容器总宽度
    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';
                    //imgs[j].style.left = j\*exposeWidth +"px";
                }
            };
            imgs[i].onmouseout = function(){


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/9477ab3ec945dfe3ad770d880808c2b4.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/b87c75f3a0639f5e914f39fb8dd96f37.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

pt数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/e035472830e329cec939b1680d7dd2ed.webp?x-oss-process=image/format,png)