微客导航 » 文章资讯 » JavaScript实现滑动门效果

JavaScript实现滑动门效果

2023-08-02 22:14:03 308

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

一、什么是滑动门

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

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

二、实现滑动门所需技术

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

三、如何实现滑动门（重点）

准备好一段HTML代码

给当前HTML结构添加样式

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

最后使用js代码实现效果

//加载dom树
window.onload=function(){
//定义盒子
varbox=document.getElementById('container');
//定义图片
varimgs=box.getElementsByTagName('img');
//图片宽度
varimgWidth=imgs[0].offsetWidth;
//隐藏宽度
varexposeWidth=210;
//盒子宽度
varboxWidth=imgWidth+(imgs.length-1)*exposeWidth;
box.style.width='px';
//设置每道门的初始位置
functionSetImgsPos(){
for(vari=1;i
效果展示

根据上面的步骤，就可以实现简单的滑动门效果，快去试试吧！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现滑动门效果

热门推荐

随机推荐