JavaScript实现滑动门效果


Posted in Javascript onJanuary 18, 2020

本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下

一、什么是滑动门

首先你要了解什么是滑动门。
生活中我们经常看到一些网站或是商城有一些滑动门的效果

JavaScript实现滑动门效果

那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法,

二、实现滑动门所需技术

1、简单的HTML基础知识
2、简单的CSS基础样式
3、基本的javascript知识

三、如何实现滑动门(重点)

准备好一段HTML代码

<div id="container">
  <img src="images/20190503222903.png"/><!--图片可以自己修改-->
  <img src="images/20190503222943.png"/>
  <img src="images/20190503223003.png"/>
  <img src="images/20190503223514.png"/>
</div>

给当前HTML结构添加样式

*{
  margin: 0;
  padding: 0;
  background-color: #ccc;
}
p{
  text-align: center;
}
#container{
  width: 1130px;
  height: 350px;
  margin: 0 auto;
  border-right:1px solid #FF0000;
  border-bottom:1px solid #FF0000;
  overflow: hidden;
  position: relative;
}
#container img{
  width:500px;
  height:350px;
  display: block;
  position: absolute;
  border-bottm:1px solid #FF0000;
}

最后使用js代码实现效果

//加载dom树
window.onload = function(){
//定义盒子
var box=document.getElementById('container');
//定义图片
var imgs=box.getElementsByTagName('img');
//图片宽度
var imgWidth = imgs[0].offsetWidth;
//隐藏宽度
var exposeWidth = 210;
//盒子宽度
var boxWidth = imgWidth + (imgs.length -1) * exposeWidth;
box.style.width='px';
//设置每道门的初始位置
function SetImgsPos(){
for(var i = 1;i<imgs.length;i++){
      imgs[i].style.left = imgWidth + exposeWidth*(i -1)+ 'px';
      }
    }
    SetImgsPos();
     //计算每道门应该移动的距离
    var translate = imgWidth - exposeWidth;
    //为每道门绑定事件
    for(var i=0;i<imgs.length;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);
    }
  }

效果展示

JavaScript实现滑动门效果

根据上面的步骤,就可以实现简单的滑动门效果,快去试试吧!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 #Javascript
JS数组方法join()用法实例分析
Jan 18 #Javascript
JavaScript进制转换实现方法解析
Jan 18 #Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 #Javascript
vue实现扫码功能
Jan 17 #Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 #Javascript
You might like
多文件上传的例子
2006/10/09 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP URL路由类实例
2013/11/12 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php远程下载类分享
2016/04/13 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
Python yield 小结和实例
2014/04/25 Python
Web服务器框架 Tornado简介
2014/07/16 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
Python实现简单猜数字游戏
2021/02/03 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang
Python中的 No Module named ***问题及解决
2022/07/23 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers