js实现滑动门效果的详细代码分享

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

一、实现滑动门所需技术

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实现滑动门效果的详细代码就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。