JavaScript中怎么实现一个滑动门效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联公司-专业网站定制、快速模板网站建设、高性价比饶平网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式饶平网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖饶平地区。费用合理售后完善，10多年实体公司更值得信赖。
一、什么是滑动门
首先你要了解什么是滑动门。生活中我们经常看到一些网站或是商城有一些滑动门的效果
那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法,
二、实现滑动门所需技术
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: 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关于JavaScript中怎么实现一个滑动门效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
分享标题：JavaScript中怎么实现一个滑动门效果-创新互联
当前网址：http://cdkjz.cn/article/cosdjs.html
