js实现图片推拉门效果代码教程_F11 - 专业站长和开发者的学习网站

分享到

js实现图片推拉门效果代码教程

JavaScript 来源：互联网搜集作者：秩名发布时间：2019-05-18 21:50:36 人浏览

摘要

本篇文章介绍js实现图片推拉门效果代码教程。推拉门是网页中常见的一种形式，通过JS实现比较简单。主要是通过getElement找到节点元素，然后对其进行相应的赋值即可。新建一个index.html文件，并在同一个目录中添加三个文件夹， images (用来当作门的图片）

本篇文章介绍js实现图片推拉门效果代码教程。

推拉门是网页中常见的一种形式，通过JS实现比较简单。主要是通过getElement找到节点元素，然后对其进行相应的赋值即可。

新建一个index.html文件，并在同一个目录中添加三个文件夹，images(用来当作“门”的图片），styles（用来存放css文件），scripts(用来存放js文件)。然后在index.html中添加代码：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>sliding doors</title>
    <link rel="stylesheet" href="styles/doors.css" rel="external nofollow" />
    <script src="scripts/doors.js"></script>
    </head>
    <body>
        <div id="container">
            <img src="images/door1.jpg" alt="柯南" title="柯南"/>
            <img src="images/door2.jpg" alt="柯南" title="柯南"/>
            <img src="images/door3.jpg" alt="柯南" title="柯南"/>
            <img src="images/door4.jpg" alt="柯南" title="柯南"/>
        </div>
    </body>
</html>

接着是styles目录下的

doors.css:

#container{
    height:600px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
 
#container img{
    position:absolute;
    border-left:1px solid #ccc;
    display:block;
    left:0;
}

然后是scripts目录下的

doors.js:

window.onload = function()
{
    var box = document.getElementById("container"); //获得容器对象
    var imgs = box.getElementsByTagName("img"); //获得图片对象数组
    imgWidth = imgs[0].offsetWidth; //图片宽度
    var exposeWidth = 100; //每张图片露出的宽度
    var boxWidth = imgWidth + exposeWidth * (imgs.length - 1);
    box.style.width = boxWidth + "px";
    
    //初始化图片位置
    function reset()
    {
        for(var i = 1; i < imgs.length; i ++)
        {
            imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";
        }
    }
    reset();
    
    //开门时候每个图片应该左移的距离
    var translate = imgWidth - exposeWidth;
    //为每个图片添加事件
    for(var i = 0; i < imgs.length; i ++)
    {
        
        //自动执行函数
        (function(i){
            imgs[i].onmouseover = function()
            {
                //重置图片位置
                reset();
                for(var j = 1; j <= i; j ++)
                {
                    imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
                    
                }
            };
            
        })(i);
    }
};

这样即可实现推拉门效果。

效果如下，截图略微粗糙

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/ppppppppppsd/article/details/51151837

Tag : JS(248)

Fabric.js实现变换视窗的示例介绍

引言 fabric.js可以通过viewportTransform属性配置画布的视窗属性。听上去很高级的样子，但其实这是原生canvas就已经存在的东西，fabric.js的vie
Vue.js前端路由和异步组件的介绍

文章目标 P6 针对react/vue能够根据业务需求口喷router的关键配置，包括但不限于：路由的匹配规则、路由守卫、路由分层等；能够描述清楚
Vue.js状态管理及SSR解析介绍

前端状态管理出现的意义及解决的问题随着前端应用的逐步复杂，我们的组件中需要使用越来越多的状态。有的时候我们需要使用子组件将
React项目中使用Redux的react-redux

背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库如果将两者连接在一起，可
javascript手机验证、邮箱验证、密码验证的正则表

javascript【手机验证】、【邮箱验证】、【密码验证】的正则表达式的封装：【手机验证】：以下代码是验证手机号码的正则表达式的方法，
Jest如何支持异步及时间函数的实现

异步支持在前端开发中，我们会遇到很多异步代码，那么就需要测试框架对异步必须支持，那如何支持呢？ Jest 支持异步有两种方式：回调
JavaScript对象新增方法defineProperty与keys的使用说明

这两个方法可以让我们更方便的操作对象，获取对象属性，赋值修改等等操作，最重要的是，这些方法可以让我们设置无法修改对象属性值
vue+elementUI封装一个根据后端变化的动态table(完整

效果图：使用组件，启用自动生成 :auto=true 自动生成-编辑（包括请求已经实现了）新增和删除也是一样 ps:如有额外的按钮可以用插槽实现
js数组去重常见的方法汇总(7种)

1、借助ES6提供的Set结构 new Set() 简单好用强烈推荐直接给一个新的数组里面，利用es6的延展运算符 1 2 3 4 5 6 7 8 9 var arr = [1,9,8,8,7,2,5,3,3,3,
Vue移动端实现调用相机扫描二维码或条形码的全

一、开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能（详见概述 | 微信开放文档），或者支