建站
咨询
售后
建站咨询
JavaScript实现滑动门效果
本文实例为大家分享了JavaScript实现滑动门效果的具体代码，供大家参考，具体内容如下
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实现滑动门效果
文章起源：http://scgulin.cn/article/igccoc.html
