js实现滑动门效果的详细代码分享-创新互联

这篇文章主要为大家详细介绍了js实现滑动门效果的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

创新互联是一家专业提供霍山企业网站建设,专注与成都网站设计、成都网站制作、H5高端网站建设、小程序制作等业务。10年已为霍山众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

一、实现滑动门所需技术

1、简单的HTML基础知识

2、简单的CSS基础样式

3、基本的javascript知识

二、实现方法

HTML

CSS

*{
  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
关于js实现滑动门效果的详细代码就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            网站标题：js实现滑动门效果的详细代码分享-创新互联            

            网站路径：http://jkwzsj.com/article/doihde.html