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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
js实现日期级联效果
Jan 23 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
JS排序之选择排序详解
Apr 08 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
django之常用命令详解
2016/06/30 Python
在python里面运用多继承方法详解
2019/07/01 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
中间件分为哪几类
2012/03/14 面试题
物流专业求职计划书
2014/01/10 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
学习雷锋倡议书
2014/04/15 职场文书
大学生毕业求职信
2014/06/12 职场文书
推广活动策划方案
2014/08/23 职场文书
公司岗位说明书
2015/10/08 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书